javascript - 具有固定比例和最小宽度的轮播图像

Question

我正在寻找像https://squareup.com/这样的轮播。我希望图像具有固定的比例、最小宽度并处理高达 1400 像素宽度的屏幕。我尝试使用 CSS 中断的所有内容。

CSS：

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

我可以使用响应式插件或图像滑块吗？或者我完全不知道的 CSS 技巧。

Answer 1

Twitter 轮播是开箱即用的响应式。首先，如果您想要屏幕最大为min-width: 1400px;1400 像素，请更改为。max-width: 1400px;

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