CSSでサイズの違う画像の高さを揃えるやり方

CSSでサイズの違う画像の高さを揃えるやり方に悩んでいたのですが画像の高さを揃えるCSSの書き方を覚えて解決できました。

サイズの違う画像の高さを揃えることができても幅が親要素からはみ出してしまう。画面を縮小させてみるものの高さを揃えた画像が潰れてしまう。ということに悩みながらも最後は解決です。

CSSを使って画像の高さが揃わなくて悩んでいる方の参考になることがあればと思い記事にしておきます。

1. CSSでサイズの違う画像の高さを揃える
2. サイズの違う画像の高さと幅を揃える
3. CSSで画像サイズを幅に合わせて高さを揃える
4. 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;を指定します。

画像トリミング前