CSSでサイズの違う画像の高さを揃えるやり方に悩んでいたのですが画像の高さを揃えるCSSの書き方を覚えて解決できました。
サイズの違う画像の高さを揃えることができても幅が親要素からはみ出してしまう。画面を縮小させてみるものの高さを揃えた画像が潰れてしまう。ということに悩みながらも最後は解決です。
CSSを使って画像の高さが揃わなくて悩んでいる方の参考になることがあればと思い記事にしておきます。
CSSでサイズの違う画像の高さを揃える
CSSで画像の高さを揃える前の画像サイズは全くサイズの違う3つの画像です。以下の画像です。
サイズの違う3つの画像はHTMLのimgタグで画像を表示させて、CSSのdisplay:flexで横並びにしたサイズの違う画像を表示させています。
画像の高さを揃えるためのHTML構造
<div class="flex-container">
<div class="flex-item">
<div class="image-wrap">
<img src="image1.jpg">
</div>
</div>
<div class="flex-item">
<div class="image-wrap">
<img src="image2.jpg">
</div>
</div>
<div class="flex-item">
<div class="image-wrap">
<img src="image3.jpg">
</div>
</div>
</div>
サイズの違う画像を横並びにするCSS
.flex-container {
display: flex;
}
.image-wrap{
margin: 10px 5px;
}
サイズの違う画像の高さをCSSで揃えるやり方は画像を表示させているimgタグをセレクタにしてheightプロパティの値を絶対値で指定します。
.flex-container {
display: flex;
}
.image-wrap{
margin: 10px 5px;
}
.image-wrap img {
height: 300px;
}
例えばCSSのheight: 300px;を.image-wrap imgセレクタに指定するとサイズの違う画像サイズが300pxで固定した画像の高さに揃えることができます。固定サイズってイヤな予感しますね。
CSSでサイズの違う画像の高さを揃えるやり方としては、高さがビシッと揃いますが、高さのサイズを固定したあとが問題で、サイズの違う画像達の幅を指定していないので画面を縮小すると横に画像がはみ出します。
はみ出しても良いよって人はいないと思うのでoverflow-x:scrollを親要素(flex-container)に指定することで高さを揃えた画像を横スクロールすることができ、画像の高さを揃えたまま画面からはみ出すこともなくなります。
画像の高さは揃うけどはみ出た部分をスクロールさせるなんてイヤだよって場合には、画像サイズの高さを揃えるだけでなく幅を親要素内に収めて揃えるやり方があります。
サイズの違う画像の高さと幅を揃える
サイズの違う画像の高さと幅を揃えるやり方はCSSで画像の高さを揃えるheightを指定したimgタグのセレクタにwidth:100%;を指定します。
.flex-container {
display: flex;
}
.image-wrap{
margin: 10px 5px;
}
.image-wrap img {
width: 100%;
height: 300px;
}
.flex-item {
flex-basis: 100%;
}
そしてflex-itemクラスのセレクタを作りflex-basis: 100%;を指定します。
そうするとflex-container内でサイズの違う画像の高さと幅を揃えることができます。
画面を縮小していくとサイズの違う画像の高さを揃えながら、幅をパーセントの相対サイズで統一しているので伸縮するようになりますが、親要素の幅に収まろうと画像が頑張るのでスマホの小さい画面では以下の画像のようになります。
画像潰れてますやん。
こんなやり方なんて使えねーよ。イヤだよ。という場合にはCSSで画像サイズを幅に合わせて高さを揃えることでスマホ画面でも良い感じに仕上げることができるやり方があります。
CSSで画像サイズを幅に合わせて高さを揃える
サイズの違う画像をCSSで画像サイズを幅に合わせて高さを揃えるやり方、つまり画像サイズの縦横の比率を合わせて高さを揃えることができるレスポンシブな良い感じにします。
.flex-container {
display: flex;
}
.flex-item {
flex-basis: 100%;
}
.image-wrap{
position: relative;
overflow: hidden;
padding-top: 60%;
margin: 10px 5px;
}
.image-wrap img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
}
具体的にはサイズの違う画像をマークアップしたimgタグをラッピングしているdivのクラスimage-wrapをセレクタにしてposition: relative;を指定します。
そしてpadding-top: 60%;のようにpadding-topプロパティの値をパーセントで指定します。
次に.image-wrap imgのセレクタにposition: absolute;を指定します。imgタグの親要素にrelativeを指定しているので親要素を基準に画像が配置されます。
親要素を基準にした位置はtopとleftを50% の位置に指定してtransform: translate(-50%,-50%);でimage-wrapの中央に画像を配置できます。
あとはwidth100%指定、heightの値をpxで指定していたのを100%で指定します。
画面サイズを変更しながら画像サイズの高さを確認すると、画面サイズに合わせて画像が自動調整されます。
親の幅を元に画像サイズの高さを比率で揃えることができているため親要素から飛び出すことなく、画像が潰れることもなくレイアウト崩れしない画像サイズの高さを揃えるやり方となります。
CSSで幅に合わせて高さを揃えるやり方ではサイズの違う画像の高さを揃えるためにheightを使わずにpadding-topで作った高さをimgタグをラッピングしてる親要素のボックス幅に合わせることで高さを揃えています。
これはパディング特性を利用したやり方で、CSSのpaddingの値にパーセントを指定すると包含ブロックの幅に関して算出されるという性質を用いてサイズの違う画像の高さを揃えています。
包含ブロックは今回で言えばimgタグをラッピングしてるimage-wrapクラスがついたdiv要素です。
CSSで画像の高さを揃えるときトリミングする
CSSでサイズの違う画像の高さを揃えるやり方にもう一手間加えたい場合にはCSSで画像の高さを揃えるときに画像をトリミングしてあげても良いかと思います。
.flex-container {
display: flex;
}
.flex-item {
flex-basis: 100%;
}
.image-wrap{
position: relative;
overflow: hidden;
padding-top: 60%;
margin: 10px 5px;
}
.image-wrap img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
object-fit: cover;
}
上の記述はCSSで画像の親要素サイズの幅に合わせて高さを揃えた良い感じに仕上げたときのCSSです。
画像のトリミングをする場合にはimgセレクタにobject-fit: cover;を指定します。
画像トリミング前
画像トリミング後
object-fitは置換要素をどのように表示するか設定できます。今回のCSSでサイズの違う画像の高さを揃えるための画像も置換要素なのでobject-fitのトリミングが有効です。
object-fitの値にcoverを指定すると、高さを揃えた画像のアスペクト比を維持したまま画像は親のボックス全体を埋めるようにトリミングできます。
また画像のアスペクト比が親のボックスのアスペクト比と合わない場合は画像が合うように切り取られトリミングされます。
CSSで画像の高さを揃えるときに必要であれば画像をトリミングするやり方も頭の片隅に記憶しておくと活躍するときが訪れます。