縦横比を維持したまま横幅いっぱいに画像を表示

ウィンドウ幅が変わっても、縦横比を維持したまま横幅いっぱいに画像を表示します。

HTML

補足

• "frame-img" クラスを付けた span 要素の中に img 要素を置きます。
• "frame-img" クラスを付けた span 要素は CSS でブロック要素にしています。

CSS

補足

• 画像に枠線や余白を付けたい場合は、"frame-img" クラスの CSS に値を設定します。

サンプル

「縦横比を維持したまま横幅いっぱいに画像を表示」のサンプル

関連記事

• 縦横比を維持したまま横幅いっぱいに画像を表示（但し、拡大表示はしない）