Bootstrap响应式轮播图像[重复]

Question

我正在尝试让我的引导轮播中的 img 响应。我尝试更改 css 中的高度和宽度，但它似乎不起作用。 我希望高度为 100vh，宽度为 img 的宽度。溢出部分可以隐藏，但 img 必须按比例缩放。现在，当屏幕较小时，它看起来像这样。

这是代码。

@media only screen and (max-width : 768px) {
        .carousel-inner > .item > img {
                height: 100vh;
                width: auto;
                overflow: hidden;
        }
}

<div class="carousel-inner" role="listbox">
     <div class="item active">
         <img src="photos/JO2_2978.JPG" alt="xmas_orchestra">
     </div>
</div>
                                                

Answer 1

如果您只关心适合视口的高度，那么只需设置高度而不是宽度，它就可以正常工作。

请记住，您将此代码包装在 @media 查询中，这意味着这些样式仅在满足查询条件时应用。

.carousel-inner > .item > img {
                height: 100vh;
                //width: auto;
                overflow: hidden;
        }

<div class="carousel-inner" role="listbox">
     <div class="item active">
         <img src="https://images.unsplash.com/photo-1487772841463-eb1f383a9e67?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="xmas_orchestra">
     </div>
</div>