具有固定比率的旋转木马图像＆amp;最小宽度

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轮播是开箱即用的响应。首先，如果要屏幕最高 1400px，请将min-width: 1400px;更改为max-width: 1400px;。

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