<div class="content">
<p class="photo-p">
ウインドウ幅の50%(calc + %)<br>
<img src="https://placehold.jp/500x150.png" alt="" /></p>
<p class="photo-vw">
ウインドウ幅の50%(vw)<br>
<img src="https://placehold.jp/500x150.png" alt="" /></p>
</div>.content {
padding: 0 10px;
p {
margin: 0;
padding: 10px 0;
text-align: center;
line-height: 1.5;
color: #fff;
font-weight: bold;
}
.photo-p {
background: #1253A4;
img {
width: calc((100% + 20px) / 2);
}
}
.photo-vw {
background: #F26964;
img {
width: 50vw;
}
}
}$('ul').slick({
arrows: false,
autoplay: true,
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true
});