使用最小高度时，图像会垂直拉伸

Question

我正在使用bootstrap和img-responsive类。我试图将图像放在div的中间，它完美地运行。但是，对于某些屏幕尺寸，我希望div / image是一定的最小高度。但是，当我设置min-height时，图像会垂直拉伸以达到此高度，但宽度不会，因此图像会失真。

CSS

img#main-im14 {
    min-height: 500px;
    width: 100%;
}

HTML：

<div class="header-content-inner">
            <img id="main-im14" src="img/image.png" class="img-responsive">
</div>

我该如何解决这个问题？

Answer 1

使用width: auto;代替。您当前的css告诉浏览器将图像的大小调整为其容器宽度的100％ AND 也将其拉伸到500px高，因此失真。