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

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

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

です。

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

サンプル画像1

サンプル写真1

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


記事に戻る