css - 画像 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;
}

score 13 · Accepted Answer

min-height と max-height の設定を忘れてしまいます。高さを 300 ピクセルに設定し、div タグにオーバーフローを非表示にします。そうすれば、画像のサイズに関係なく、常に比率が維持され、div タグの境界を超えることはありません。

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

score 4 · Accepted Answer

最も簡単な方法で引き伸ばされないようにする場合は、画像を div の背景として配置します (ただし、元の幅は維持します)。

score 1 · Accepted Answer

overflow:hiddendiv の幅の外側にある画像の任意の部分を非表示にするために使用できます。

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

score 1 · Accepted Answer

max-widthの代わりに使用しmin-width、に設定heightし300pxます (またはのみを使用しますmax-height)。

9 に答える 9