Bootstrap响应式旋转木马图像

时间:2017-03-08 14:59:17

标签: html css image twitter-bootstrap responsive

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

这是代码。

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

1 个答案:

答案 0 :(得分:0)

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

请记住,您将此代码包含在@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;