【CSS】画像の大きさをウインドウ幅に合わせ自動的に拡大縮小させる方法

画像の大きさをウインドウ幅に合わせて自動的に拡大縮小させる方法

画像がウインドウに対して拡大しすぎたり小さくなりすぎたりすることを防ぐCSSの記述になります。

HTML

<p>
   <img src="gazou.png" alt="画像">
</p>

pタグの中に画像（img要素）が１つ含まれています。

CSS

img {
   width: 100%;
}

この記述は拡大しすぎたり縮小しすぎたりする場合があります。

CSS

img {
   width: 100%;
   height: auto;
}

「auto」を指定することで縦横比を維持して、拡大・縮小します。

画像本来の大きよりも大きく表示させない方法（ウインドウ幅に合わせて表示）

img {
    max-width: 100%;
}

max-widthで横幅の最大値を100%にしておきます。

・描画領域の幅が狭い場合には、横幅一杯に収まるように縮小され表示します。

・描画領域の幅がわかれば原寸で表示します。

画像原寸サイズより大きく表示されることはありません。

画像は原寸サイズ、拡大縮小せず表示可能な範囲だけ見せる方法

CSS

p {
   overflow: hidden;
}

hiddenを指定することで、ブロックからはみ出る部分を非表示にできます。描画領域より画像の方が大きい場合でも見える範囲だけ表示されます。画像は原寸のまま。

いいね、シェア、フォロー歓迎！2020テーマは「自然から学び自然と共に生きる」

@evahks