画像と同じサイズのレスポンシブ枠を作成し、画像を枠に合わせて表示する - CSS
画像と同じサイズのレスポンシブ枠を作成し、画像を枠に合わせて表示するコードを紹介します。
概要
画像と同じサイズのレスポンシブ枠を作成して、画像を枠に合わせて表示します。
ウィンドウ幅が広がると、レスポンシブ枠の幅が広がり画像の大きさも合わせて拡大される動作になります。
実施する理由
単純に画像を表示する方法であれば、imgタグのみの設置で問題ありませんが、画像が大きい場合や画像の読み込みに時間がかかる場合、画像が読み込まれたタイミングでページに画像が表示されるためページ内のがたつきが発生します。
このため、Cumulative Layout Shift (CLS) のスコアが悪化します。サイズが固定されている画像であれば、imgタグのwidthやheightプロパティを設定するか、CSSでwidth, height を指定すれば対処できますが、レスポンシブ枠の場合は画面の幅に応じて枠の幅や高さが変化するため、あらかじめ固定された値を記述できません。
方法
こちらの記事で紹介している、縦横比を固定したレスポンシブ枠の作成と同様の方法を利用します。before疑似クラスを利用して画像の枠の上部にpadding-topを設定します。
プログラム
画像
image.png として下図の画像を準備します。
幅 1,800ピクセル、高さ 400ピクセルのpng形式の画像です。
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="SingleFullFrame.css" />
</head>
<body>
<div class="PageFrame">
<p>アスペクト比を固定した枠内に画像を表示する例です。</p>
<div class="ImageFrame">
<img class="ImageContent" src="image.png" />
</div>
<p>てすとてすと、あいうえお、かきくけこ</p>
</div>
</body>
</html>
body {
text-align:center;
}
.PageFrame {
margin-left: 4rem;
margin-right: 4rem;
}
.ImageFrame{
position:relative;
width:100%;
background-color:#C0C0C0;
}
.ImageFrame:before {
content: "";
display: block;
padding-top: calc(400/1800*100%);
}
.ImageContent {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width:100%;
}
解説
画像を表示する枠のコードです。画像を表示するimgタグに ImageContent クラスを設定します。
画像を表示する枠をdivタグで記述し ImageFrame クラスを設定します。 ImageFrameクラスのdiv枠が
縦横比を維持した状態で、レスポンシブ表示する設定にします。
<div class="PageFrame">
<p>アスペクト比を固定した枠内に画像を表示する例です。</p>
<div class="ImageFrame">
<img class="ImageContent" src="image.png" />
</div>
<p>てすとてすと、あいうえお、かきくけこ</p>
</div>
画像を表示する枠 ImageFrameのクラス設定です。レスポンシブ表示すとするため widthを100%とします。
また、positionプロパティをrelativeに設定します。これは内部のimgタグのleft, top プロパティの値を0に設定した際に
ImageFrameクラスの枠の左上に画像が表示される動作にするためです。詳しくは
こちらの記事を参照して下さい。
before疑似クラスで枠の幅に応じた高さをpaddin-topで設定します。今回用意している画像の幅が1,800ピクセル、高さが400ピクセルのため、幅を100%とした場合の高さは
画像の高さ / 画像の幅 * 100% の比率となりますので、
calc(400/1800*100%) の記述となります。
paddingの値が枠の大きさとして表示されるように
display:block を指定します。詳しくは
こちらの記事を参照してください。
.ImageFrame{
position:relative;
width:100%;
background-color:#C0C0C0;
}
.ImageFrame:before {
content: "";
display: block;
padding-top: calc(400/1800*100%);
}
img タグのクラスの設定が以下の記述になります。position:absolute を設定し、top, left を0に設定することで親の要素の左上の位置に
画像を配置します。width:100%を指定し親の要素の枠の幅全体に表示します。
.ImageContent {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width:100%;
}
表示結果
上記のページをWebブラウザで表示します。下図のページが表示されます。
ウィンドウ幅を狭めると枠が縮小し、中の画像も縮小されます。縦横比が維持されるため画像は全体が表示された状態になります。
ウィンドウ幅を広げると、枠が拡大され中の画像も拡大されます。
画像が見つからない場合の表示です。画像が無くても画像と同じ大きさの枠が表示されます。(背景色が灰色の枠です)
ウィンドウ幅を狭めると、ウィンドウ幅に合わせて枠が縮小します。縦横比が変わらない状態で枠の大きさが縮小されます。
画像と同じサイズのレスポンシブ枠を作成し、画像を枠に合わせて表示できました。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
