画像の表示サイズ調整サンプル2

表示例は以下の通りです。ブラウザのウインドウサイズを様々に変化させて、表示を確認してみて下さい。
詳しい解説は、記事「画像を自動リサイズする際に拡大縮小しすぎを防ぐCSS」の本文をご参照下さい。

なお、サンプル表示に使っている画像の実寸サイズは、

です。

▼画像をウインドウ幅いっぱいに表示したいが、本来の大きさより小さくはしたくない場合
(画像を本来の大きさで表示したいが、ウインドウ幅が広いなら自動拡大したい場合)

サンプル画像1

サンプル写真1

▲実寸サイズより縮小されることはありませんが、ウインドウ幅が広ければ自動拡大はされます。


記事に戻る