最小高さを使用しているときに画像が垂直に伸びます

Question

私はブートストラップと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％に画像のサイズを設定するようにブラウザに指示していますとはそれを500pxの高さに伸ばします。