CSS - 垂直响应图像

Question

我有下面的滑块：

但是我有一个调整大小的问题。

现在是1200 x 400，当我调整页面大小时，图像宽度会调整大小。问题是高度保持400px，但我希望在较小的设备上查看时，高度也会相对于图像的宽度调整大小。

我该怎么做？

这是您在手机上看到的内容：

现在图像的CSS是：

max-width: 100%;
height: auto;

我试过的是：

• 将高度设置为33.3％（宽度html，body和#container设置为width: 100%）

• 我尝试使用vh和vm进行差异设置，但无法正常工作

顺便说一下：

我正在使用Bootstrap 4，所以如果Bootstrap中有一个类可以解决这个问题，那将是完美的。

我在[{3}}

上也有实时版本

Answer 1

这完成了这项工作。将此元素设置为显示块。

carousel-item-next, .carousel-item-prev, .carousel-item.active {
  //display: -webkit-box;
  //display: -webkit-flex;
  //display: -ms-flexbox;
  //display: flex; 

  display: block;

}

但是，您将在较小的屏幕上获得一个小滑块。我要做的是将imagse设置为background-image，然后设置background-size to cover。这样，图像将从中心缩小/缩小（或者您可以随时随地更改）。然后我会为滑块的media queries设置height。这样您就可以更好地控制滑块。

Answer 2

快速修复，只需覆盖您的引导程序并根据屏幕大小设置高度。

@media screen and (min-width: 480px) {
#yourDiv {
    height: 200px; //or 50%;
}    

@media screen and (min-width: 1024px) {
#yourDiv {
    height: 400px; //or 100%;
}