html - CSS - 垂直响应图像

Question

我有以下 slider :

但是我在调​​整它的大小时遇到​​了问题。

现在是 1200 x 400，当我调整页面大小时，图像 width 会调整得很好。问题是高度保持为 400 像素，但我希望当您在较小的设备上查看图像时，高度也会根据图像的宽度调整大小。

我该怎么做？

这是你在手机上看到的:

现在图像的 css 是:

max-width: 100%;
height: auto;

我试过的是:

• 将高度设置为 33.3%(宽度 html、body 和 #container 设置为 width: 100% )

• 我尝试使用 vh 和 vm 进行不同设置，但没有按我希望的方式工作

---

顺便说一句:

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

我在 https://jalinen.luukwuijster.io 上也有一个实时版本

Answer 1

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

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

  display: block;

}

但是，您会在较小的屏幕上看到一个小 slider 。我要做的是将 imagse 设置为 background-image，然后将 background-size 设置为覆盖。这样图像将从中心按比例缩小/放大(或者你可以从任何你想要的地方改变)。然后我会为 slider 的 height 设置 media queries。这样您就可以更好地控制 slider 。