html - 画像を正しい比率で 2 つのサイズでレンダリングすることは可能ですか?

Question

製品に関連付けられた写真が 1 つしかない Web サイトがあります。写真のサイズは通常+200 X 200+です。ある場所では画像を 100X100 で表示し、別の場所では 75X75 で表示したいと考えています。

画像を同じ比率で適切に表示することは可能ですか。現在、画像は場所によって太く、長く、または薄く見えます。

Answer 1

画像の高さまたは幅のみを設定すると、他の寸法は比例してサイズ変更されます。

したがって、画像コンテナーが 100X100 px の場合、次のように画像のスタイルを設定できます。

div.imageContainer100X100px img {
    max-width: 100px;
    max-height: 100px;
}

または 75X75 ピクセルの場合:

div.imageContainer75X75px img {
    max-width: 75px;
    max-height: 75px;
}

Answer 2

IMG タグを使用して、同じ画像をさまざまな場所にさまざまなサイズで表示したとします。画像を正しい比率で表示するには、いずれかの寸法を設定します。幅または高さは自動的に調整されます: 例:

<img src="mypic.png" width="75px" /> 

上記のコードでは、画像タグが正しい比率になるように高さを自動的に調整します。

お役に立てれば