イメージCSSの伸ばしを避ける

Question

イメージを自分のdivにレンダリングしています。私はイメージの伸びを避けたい。

div { 
      height: 300px; 
      width: 300px; 
     } 
    img { 
      min-width: 300px; 
      min-height: 300px; 
      max-height: 300px; 
     } 

私の問題は、画像が幅で歪んでいることです。画像の一部が欠落しても、私は通常の幅になりたい。

div { 
      height: 300px; 
      width: 300px; 
      overflow: hidden; 
     } 
    img { 
      height: 300px 
      max-width: none; 
      min-width: 300px; 
     } 

私はそれを解決しました。

Answer 1

最も簡単な方法で伸びるのを避けたい（元の幅を維持する）ようにするには、画像をdiv背景として配置します。

Answer 2

代わりmin-widthの使用max-width、ちょうど300pxにheightを設定（または唯一max-heightを使用します）。

Answer 3

overflow:hiddenを使用すると、画像の任意の部分をdivの幅の外側に隠すことができます。

div { 
     height: 300px; 
     width: 300px; 
     overflow: hidden; 
    } 
img { 
     /*min-width: 300px;*/ 
     height: 300px; 
    } 

Answer 4

min-heightとmax-heightの設定は忘れてしまいます。高さを300ピクセルに設定し、divタグにオーバーフローを隠しておくだけです。そうすれば、画像の大きさにかかわらず、常に比例してdivタグの境界の外に出ることはありません。

div { height: 300px; width: 300px; overflow: hidden; } 
img { height: 300px; }