iPentec.com / Doc / CSS

画像の幅を親要素の枠の幅に合わせる - CSS

画像の幅を親要素の枠の幅に合わせるコードを紹介します。

概要

imgタグでHTMLページに画像を表示した場合に、親要素の枠の幅に合わせて拡大、縮小したい場合があります。
レスポンスページでウィンドウサイズに合わせて枠のサイズが変化する場合に画像の大きさを枠の大きさに合わせて表示します。

方針

imgタグのスタイルでwidth:100%を指定すると、親要素の枠のサイズに合わせて画像を表示できます。

実装例

コード

以下のHTMLとCSSを作成します。

image-responsive-width-01.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="image-responsive-width-01.css" />
</head>
<body>
  <h2>コンテンツ幅に合わせてイメージの幅を変化させる</h2>
  <div class="ContentFrame">
    <img class="ContentImage" src="image-800.png"/>
  </div>

</body>
</html>

image-responsive-width-01.css

.ContentFrame {
  border: 2px solid #0094ff;
  margin: 4rem auto 4rem auto;
  padding:0.5rem 0.5rem 0.5rem 0.5rem;
}

.ContentImage {
  width:100%;
}

解説

divで枠を表現します。クラスにContentFrameを設定します。

  <div class="ContentFrame">

  </div>

CSSでContentFrameクラスに枠線を表示します。また、マージンとパディングを設定しています。

.ContentFrame {
  border: 2px solid #0094ff;
  margin: 4rem auto 4rem auto;
  padding:0.5rem 0.5rem 0.5rem 0.5rem;
}

imgタグで画像を表示します。クラスにContentImageを設定しています。

    <img class="ContentImage" src="image-800.png"/>

CSSでContentImageクラスには width:100%;を指定します。この設定で親要素の幅に合わせて画像が表示されます。

.ContentImage {
  width:100%;
}

表示結果

上記のHTMLページをWebブラウザで表示します。下図のページが表示されます。
ウィンドウの幅に合わせて枠のサイズが調整され、枠内に収まる幅で画像が表示されています。

ウィンドウの幅を広げると枠の幅が広がり画像の幅も広がります。

更にウィンドウの幅を広げると画像が元のサイズより大きく表示されることになり、画像が拡大されて表示されます。

メモ

今回紹介した方法では、画像のピクセルサイズより枠の幅が広がった場合、画像が拡大されて表示されます。そのため、画像がにじんだり、ぼやけた表示になります。画像の元の大きさより大きくは表示したくない場合は max-widthプロパティを利用します。詳しくは、こちらの記事を参照してください。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次

画像の幅を親要素の枠の幅に合わせる - CSS

概要

方針

実装例

コード

解説

表示結果

関連するページ