【CSS/html】画像の高さを揃える方法【レスポンシブ対応】

「縦の画像でも横の画像でもキレイにならべたい！」

下記のように高さの異なる画像の高さを揃える方法を解説します。

画像を横並びさせる方法はこちら↓

高さを指定

imgのheightが同じなら高さはそろうわけです。

imgにheightを数値指定しましょう。

<style>
.example img{
    height: 150px;
    width: auto;
}
</style>
<div class="example">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
    <img src="https://csshtml.work/wp-content/uploads/dog.jpg" alt="">
    <img src="https://csshtml.work/wp-content/uploads/rabbit.jpg" alt="">
</div>

「width:auto」を指定すると画像の比率を守った幅になります。

高さも幅も指定してトリミング

高さをそろえただけでは縦横比の違いで画像の大きさ、横幅が異なってしまいます。

だからといってwidthを数値指定しても引き延ばされた画像になってしまいます。

そんなときは「object-fit:cover」を指定してトリミングしましょう。

<style>
.example2 img{
    object-fit: cover;
    height: 150px;
    width: 150px;
}
</style>
<div class="example2">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
    <img src="https://csshtml.work/wp-content/uploads/dog.jpg" alt="">
    <img src="https://csshtml.work/wp-content/uploads/rabbit.jpg" alt="">
</div>

一番高い画像にそろえる

「display:flex」を指定すると画像が横並びになり、改行されなくなります。

また、高さがそろいます。基準は高さが一番大きい画像です。

あとは上記と同様に「object-fit:cover」と「width」を指定しましょう。

<style>
.example3{
    display: flex;
}
.example3 img{
    object-fit: cover;
    width: calc(100%/3);
}
</style>
<div class="example3">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
    <img src="https://csshtml.work/wp-content/uploads/dog.jpg" alt="">
    <img src="https://csshtml.work/wp-content/uploads/rabbit.jpg" alt="">
</div>

heightを数値指定して任意の高さにしてもいいでしょう。

レスポンシブ対応するときはpx指定ではなく、vwやvhなど相対指定にするといいでしょう。

【まとめ】画像の高さを揃える方法

imgにheightを数値指定

高さも幅も指定してトリミング→「object-fit:cover」を指定

以上、画像の高さを揃える方法でした。