[CSS] 画像を元サイズを最大値としてブラウザサイズに合わせて拡大縮小させる

2019年12月3日

画像をサイズを最大値として、ブラウザのサイズに合わせて画像を拡大縮小表示させる方法です。

サンプル

以下のように、画像に対してCSS「max-width:100%;」を設定すればOKです。

<html>
<head>
  <title>Sample</title>
</head>
<body>
  <div>
    <img src="sample.jpg" style="max-width:100%;">
  </div>
</body>
</html>

<html>

<head>

<title>Sample</title>

</head>

<body>

<div>

</div>

</body>

</html>

以下画像は600pxをMAXとしてブラウザサイズによりリサイズします。

max-width:100%ではなくwidth:100%を指定すると、表示エリアが画像サイズより大きい場合は画像の元サイズより大きく拡大されて表示されます。
この表示方法が良い場合は、width:100%を指定してください。

Posted by tora