【 object-fit 】 imgタグとセットで使ってレイアウト崩れ防止 FIREへの旅路 ♯443
WEBサイトを構成する要素として、画像は必須です。
この画像は、単に<img>タグで配置すると、
レスポンシブ時にレイアウト崩れの要因となります。
<img>タグを何タグで囲うのか論争は諸説ありますので、私のやり方を書きたいと思います。
【 模写コーディング教材 】
今回は、このようなレイアウトを作ります。
Shogoさんのコーディング学習の中級編EXの教材の一部になります。
この教材は本当に実践的です。
私は時間がある時にたまたま取り組んでいたのですが、
その後にいただいたコーディングの仕事で、まさに同じ機能の実装が必要となり、「やっといてよかった〜」と感じました。
今回は、この画像と、テキストが横並びになっている部分をコーディングしながら、画像の動きを見ていきます。
・ <img>タグを<div>タグの中に
<!-- HTML -->
<div class="about">
<div class="about-container">
<!-- お部屋の紹介 -->
<div class="about-container-item">
<div class="about-container-item-img">
<img src="images/oheya-top.jpg" alt="お部屋">
</div>
<div class="about-container-item-text">
<div class="about-container-item-text-inner">
<h2>喧騒から離れた空間<br>心落ち着く至極のひととき</h2>
<p>まるで時が止まったかのような、圧倒的な静寂の中で、<br>
ひたすらにゆっくりと…。<br>
最高級の「何もしない時間」をお過ごしください。
</p>
<div class="about-button">
<a href="#">お部屋について</a>
</div>
</div>
</div>
</div>
</div>画像は<img>タグで配置しますが、この<img>タグはインライン要素になります。
インライン要素は、非常に簡単にいうと「横並び」になる要素です。笑
その反対の、ブロック要素は、「縦並び」になる要素です。
インライン要素には、CSSで指定できるスタイルが限られ、制御しにくいです。
これを解決するために、ブロック要素である<div>タグの中に入れています。
【 画像の動き 】
画像に高さを指定する場合と、しない場合、どうなるのか見ていきます。
▶︎ 高さ指定なし
画面の最大幅(上)から、縮小した場合(下)の画像の動きを見てください。
▶︎ コード
/* SCSS */
.about {
width: 100%;
&-container {
width: 100%;
padding-bottom: 78px;
&-item {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-top: 122px;
&-img {
width: 55%;
img {
width: 100%;
}
}
このように、画像に高さを指定しないと、画面幅を縮小した時に、
画像の幅に合わせて高さが変化してしまします。
その結果、右側のテキストと高さが合わなくなり、レイアウトが崩れてしまいます。
&-img {
width: 55%;
img {
width: 100%;
}ここに高さ指定を追加します。
▶︎ 高さ指定あり
■ コード
/* SCSS */
.about {
width: 100%;
&-container {
width: 100%;
padding-bottom: 78px;
&-item {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-top: 122px;
&-img {
width: 55%;
height: 500px;
img {
width: 100%;
height: 100%;
}
}
このように、高さを指定すると、幅が縮小されても、
右のテキストとの高さが維持されるので、レイアウトは守られます。
しかし、問題は高さが確保されたことで、画像が縦に伸びてしまっていることです。
これを解決するには、object-fitを使います。
&-img {
width: 55%;
height: 500px;
img {
width: 100%;
height: 100%;
}ここに、object-fitを追加します。
■ object-fit
■ コード
/* SCSS */
.about {
width: 100%;
&-container {
width: 100%;
padding-bottom: 78px;
&-item {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-top: 122px;
&-img {
width: 55%;
height: 500px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}<img>に対して、object-fit: cover; を指定しました。
これにより、画像がトリミングされます。
幅に合わせて画像が縮んだり、
高さに合わせて画像が縦長になることがありません。
【 コーディングまとめ 】
<img>を<div>に入れる
<div>にwidth、heightを指定する
<img>にwidth、height、object-fitを指定する
object-fitは、coverを指定する
【 まとめ 】
自分のPCの画面サイズで、完璧にレイアウトが完成した！
と思っても、画面幅を変更すると、崩れてしまうことはよくあります。
どのサイズであっても、レイアウトが保たれるように、
画像に関しては、このようにコーディングしておくと安心です。
この方法は、ひとつの手法ですから、様々なコーディングを学ぶことをおすすめします。
この記事が気に入ったらサポートをしてみませんか？