画像のレスポンシブ対応

ウィンドウ幅やブロック要素の幅の変化に合わせて、画像の縦横比を維持したまま、拡大・縮小表示（レスポンシブ対応）する。

デモページを表示

CSS

補足

• frame-img は画像のコンテナに付けるクラスで、画像周りの枠線や余白設定に使える。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• span 要素に frame-img クラスを付け、その中に img 要素を置く。