Question

第一次来电，长时间倾听。

我正在尝试将我的照片放入这个光滑的旋转木马中，但垂直部分总是在边界之外。理想情况下，我希望我的照片填充旋转木马部分（封面），并希望尺寸适应屏幕尺寸的变化。

我是编码的新手并且已经尝试了很多。以下是我现在所在网站的一些链接：

https://codepen.io/jerimijones/pen/WXvBMX

#carousel {
  width: 70%;
  height: 90%;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -20%);
  border-color: white;
  border-style: solid;}

https://carouseltest.netlify.com/

非常感谢任何帮助。

Answer 1

CSS Image size, how to fill, not stretch?

的可能副本

您可以使用css属性object-fit。

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

See example here

IE有一个polyfill：https://github.com/anselmh/object-fit

使用光滑的轮播时，不需要的图像溢出

1 个答案: