Question

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

我尝试添加max-height: 120px; overflow: hidden;，但它无效。

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

演示：

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，它应该可以工作。

Answer 2

好吧，如果你将max-height设置为120px，它就不会超过它，这就是图像调整大小的原因。我不太确定你在找什么？

这可能有助于您：https://jsfiddle.net/uxp1cbto/

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

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

2 个答案: