[CSS]サイズが違う画像を並べ、縦横比を変えずに高さを合わせる[レスポンシブ]

サイズが違う画像を並べた時に、レスポンシブ対応で縦横比をそのままに、高さを合わせる方法に地味に躓いてしまった。
いろいろ試してみた結果、不完全ながらシンプルにできる方法がありました。

サンプル

上記は全て高さも横幅も違う画像ですが、ウィンドウサイズを変更しても同じ縦横比で高さが揃っているかと思います。

HTML

<div class="flex">
    <div>
        <img src="img1">
    </div>
    <div>
        <img src="img2">
    </div>
    <div>
        <img src="img3">
    </div>
    <div>
        <img src="img4">
    </div>
</div>

「class=”flex”」にはCSSで「display=”flex”」を付与しますが、これの直下にimgを置かない様に注意。

CSS

.flex {
    width: 100%;
    display: flex;
}

.flex img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 400px;
}

「.flex img」のmax-heightは並べた画像の中で、もっとも高さが小さい画像の高さの数値。

まとめ

以上で完成です。
Max-heightを実数で入れてしまうので、レスポンシブでの最大サイズに限界があったりします。
ただ、基本的にはかなりの横幅まで問題ないですし、横幅無限のページはあまり想定したくありません。
（もちろん画像サイズによりますが。）