具有固定比率和最小宽度的轮播图像

Question

我希望创建一个像https://squareup.com/这样的旋转木马。我想要的图像有一个固定的比例，最小的宽度和处理高达1400px宽度的屏幕。我尝试使用CSS的每一件事都会中断。

CSS：

.carousel .item {
  height: 800px;
}
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 1400px;
  height: 100%;
}

有没有响应式的插件或者图片滑块我可以用？或者是一个我完全不知道的CSS技巧。

Answer 1

Twitter carousel是开箱即用的响应式工具。首先，如果你想屏蔽到 1400px，把min-width: 1400px;改成max-width: 1400px;。

但是，你不会得到固定的比率(在你的例子中也没有固定的比率)。为此，您可以使用CSS3媒体查询来更改图片的宽度和高度。