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

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

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

です。

▼画像を拡大も縮小もせず、原寸のまま、表示可能な範囲だけを見せたい場合

サンプル画像1

▲表示は実寸サイズのままで拡大も縮小もされないが、実寸の横幅(888ピクセル)よりウインドウ幅を狭くすると、はみ出る分の右端は消える。

サンプル写真1

▲表示は実寸サイズのままで拡大も縮小もされないが、実寸の横幅(1100ピクセル)よりウインドウ幅を狭くすると、はみ出る分の右端は消える。