1行で、画像をレスポンシブにする

爆速開発テク・TIPS

さまざまな画面(スマホやPCなど)に対応した画像は、レスポンシブ・イメージと言われいます。

CSSでレスポンシブ・イメージを実現するもっとも簡単な手法を2選、ご紹介します。

max-width の設定

img タグに width: 100% を設定しましょう。
これで親要素からはみ出さなくなり、親要素の width を基準として表示されます。
だいたいのことはこれだけで済みます。

img {
    width: 100%;
}

object-fit の設定

object-fit は、レスポンシブ・イメージを実現するもっとも簡単な方法です。
※ 現行では、すべてのモダンブラウザに対応。ただし、IE や 古い Edge は未対応です。
Can I use… Support tables for HTML5, CSS3, etc

さまざまなプロパティがありますが、よく使うものは2つ。

img {
    width: 100%;
    height: 100%; // heightも100%にする

    // 縦横比を保ちながら、親要素を完全に覆うようリサイズ。
    // つまり、中央付近にフォーカスするような状態で拡大されます。
    object-fit : cover;

    // 縦横比を保ちながら、親要素を完全に覆うようリサイズ。
    // つまり、親要素の枠に収まるサイズに自動調整されます。
    object-fit : contain;

}

参考
1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス
レスポンシブWebデザインを実装するためのTips – WebTecNote

タイトルとURLをコピーしました