我正在為產品頁面制作影像輪播，并且我正在嘗試保持所有組件的回應性。我的目標是重新縮放影像，使其適合大小不超過 600 像素的 div。它在方形和橫向影像上效果很好，但問題是現在縱向影像（高度>寬度）正在被剪切。我正在使用 React 和 Material UI。這是我的代碼：
產品頁面.js：
<Box className='image-slider'>
<CarouselProvider
className='carousel'
naturalSlideWidth={1}
naturalSlideHeight={1}
totalSlides={images.length}
>
<Box className='slider-and-buttons'>
<Slider>
{images.map((image, i) => (
<Slide index={i}>
<Box component="img"
className='product-image'
key={i}
alt="Image"
src={image}>
</Box>
</Slide>
))}
</Slider>
<IconButton as={ButtonBack} className='back-img'>
<ArrowBackIosIcon />
</IconButton>
<IconButton as={ButtonNext} className='next-img'>
<ArrowForwardIosIcon />
</IconButton>
</Box>
</CarouselProvider>
</Box>
產品頁面.scss：
.image-slider{
max-width: 600px;
margin: 0 auto;
.slider-and-buttons {
position: relative;
.product-image {
width: 100%;
height: auto;
}
.back-img {
border: none;
background: rgba(255, 255, 255, 0);
position: absolute;
top: 50%;
right: 95%;
}
.next-img {
border: none;
background: rgba(255, 255, 255, 0);
position: absolute;
top: 50%;
left: 95%
}
}
}
我也嘗試過使用 object-fit:cover 但這根本不起作用，我不知道為什么。
uj5u.com熱心網友回復：
我已經成功實作了我想要的目標：
.image-slider{
max-width: 600px;
margin: 0 auto;
.slider-and-buttons {
position: relative;
.product-image {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/506972.html