フレキシブルイメージ

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 66/76。

レスポンシブWebデザインにおいて、フレキシブルイメージは、さまざまな画面サイズに合わせて自動的に調整され、すべてのデバイスで適切に表示されるようになります。柔軟性がないと、画像が小さな画面に対して大きすぎたり、レイアウトが崩れたりすることがあります。

画像をフレキシブルにする方法:

1. CSSのmax-widthを使用する
max-width: 100%を設定することで、画像がコンテナの幅を超えないようにします。

img {
  max-width: 100%;
  height: auto; /* アスペクト比を維持します */
}

2. ビューポート単位の使用
vw (viewport width) を使用して画像のサイズを指定することで、画面サイズに合わせて画像をスケーリングさせることができます。

img {
  width: 50vw; /* 画像はビューポート幅の50%を占めます */
}

チャレンジ

簡単

画像を含むHTMLドキュメントが与えられます。あなたのタスクは、画像をレスポンシブにして、異なる画面サイズに合わせて調整されるようにすることです。

クラス img-max を持つすべての要素をターゲットにするCSSルールを記述してください。その max-width を 100% に、height を auto に設定します。
クラス img-vw を持つすべての要素をターゲットにするCSSルールを記述してください。その width を 50vw に、height を auto に設定します。

チートシート

フレキシブルイメージは、レスポンシブWebデザインにおいて、異なる画面サイズに合わせて自動的に調整されます。

max-width を使用する場合:

img {
  max-width: 100%;
  height: auto; /* アスペクト比を維持します */
}

ビューポート単位を使用する場合:

img {
  width: 50vw; /* 画像がビューポート幅の50%を占めます */
}

自分で試してみよう

<html>
<head>
    <title>Flexible Images</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
     <div class="container">
        <h2>Image with max-width: 100%</h2>
        <img class="img-max" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Adelie_penguins_in_the_South_Shetland_Islands.jpg" alt="Max-Width Image">
    </div>

    <div class="container">
        <h2>Image with width: 50vw</h2>
        <img class="img-vw" src="https://upload.wikimedia.org/wikipedia/commons/4/40/Adelie_Penguins_on_iceberg.jpg">
    </div>
</body>
</html>