<div key={index}>
<div className="mat" style={{ backgroundImage: `url('${item}')` }}>
<div className="swiper-container">
<img src={item} alt="" className="img" />
</div>
</div>
</div>
.swiper-container {
width: 1190px !important;
margin-left: auto;
margin-right: auto;
display: block;
height: 400px;
overflow: hidden;
position: relative;
.img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.mat {
background-size: 100% 100%;
height: 400px;
}
.swiper-wrap {
background-color: pink;
}
最初は完全に、それは、中央画像パッケージボックスによって配置されている背景画像の表示に一致するように、背景画像を設定します。