Bootstrap响应式旋转木马图像

Question

我正在尝试让我的bootstrap轮播中的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查询中，这意味着这些样式仅在满足查询条件时应用。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;