html - 为什么我不能在不调整大小的情况下设置图像的最大宽度

Question

我在容器中有一个 img。我已经为图像设置了 width: 100%，现在我想为图像设置一个 max-height 而不调整它的大小。

我尝试添加 max-height: 120px; overflow: hidden; 但它不起作用。

为什么我不能将图像裁剪为距顶部 100% 宽度和 120px 高度？

演示:

https://jsfiddle.net/DTcHh/14727/

HTML:

<div class="row">
    <div class="col-xs-6">
        <img src="http://www.tuning-links.com/uploads/image/2009/June/VW%20Scirocco%20Remis/VW_Scirocco_Remis_4.jpg" alt="">
    </div>
    <div class="col-xs-6">
        <img src="http://www.tuning-links.com/uploads/image/2009/June/VW%20Scirocco%20Remis/VW_Scirocco_Remis_4.jpg" alt="">        
    </div>               
</div>

CSS:

img{
    width:100%;
    max-height:120px;
    overflow:hidden;  
}

Answer 1

您需要将图像包裹在一个 div 中。在 div 上使用相同的 css，它应该可以工作。