0

たとえば、120 x 90 px の画像があります。ここで、たとえば 80 x 50 ピクセルで、その画像の小さいバージョンを表示したいと考えています。同じサイズの画像で機能する幅と高さを使用できることはわかっています。

今私の問題は、元のサイズが異なるさまざまな画像があり、静的な幅と高さを使用するだけで一部の画像が奇妙に見えることです(比率が台無しになるため)。

このような場合はどのように処理すればよいでしょうか。純粋な CSS で可能ですか、それとも JS が必要ですか?

ありがとう！

4

1 に答える 1

1

これをダイナミック div と呼び、de div が小さくなったり大きくなったりすると画像のサイズが変更されます。

例

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

.video embed,
.video object,
.video iframe {
    width: 100%;
    height: auto;
}

<div style="max-width:500px;">
    <img src="..." />
</div>

FIDDLE注: ブラウザー ウィンドウのサイズを変更すると、画像のサイズも変更されていることがわかります。

小さな div を作成すると、画像も小さくなります。等

于 2013-06-14T12:55:09.897 に答える