javascript - 固定比例和最小宽度的轮播图片

我正在寻找创建像https://squareup.com/这样的轮播。我希望图像具有固定比例，最小宽度并能处理最大1400px宽度的屏幕。我尝试使用CSS进行的所有操作都会中断。

CSS：

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

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

最佳答案

Twitter旋转木马开箱即用。首先，如果要最大显示1400像素，请将min-width: 1400px;更改为max-width: 1400px;。

但是，您将无法获得固定比率（示例中没有固定比率）。为此，您可以使用CSS3媒体查询来更改图片的宽度和高度。