[CSS] 縦横比やサイズの違う画像をカード形式できれいに並べたい

公開日:2019/08/17 更新日:2020/03/01

縦横サイズの違う画像を並べると、横幅を揃えても高さが揃わず、逆もまた然りでなかなかきれいに並べることができません
これにキャプションまで付けるとなると、画像によってキャプションの開始位置まで変わってしまい、なおさら煩雑になってしまいます
そんなときは、画像とキャプションをカード形式の枠に収めてリスト化するのがオススメです
サイズがバラバラの画像も、背景色付きの枠の中に配置することで全体に統一感が生まれます
flexboxでキャプションの位置を揃えることができるため、ただ雑然と並べるよりも整った一覧表示になります

サンプルコード

html

<ul class="list_card">
    <li>
        <a href="">
            <div class="list_card_image">
                <img src="./images/sample01.jpg" alt="サンプル画像">
            </div>
            <p>サンプル画像</p>
        </a>
    </li>
    <li>
        <a href="">
            <div class="list_card_image">
                <img src="./images/sample02.jpg" alt="サンプル画像">
            </div>
            <p>サンプル画像</p>
        </a>
    </li>
    <li>
        <a href="">
            <div class="list_card_image">
                <img src="./images/sample03.jpg" alt="サンプル画像">
            </div>
            <p>サンプル画像</p>
        </a>
    </li>
    <li>
        <a href="">
            <div class="list_card_image">
                <img src="./images/sample04.jpg" alt="サンプル画像">
            </div>
            <p>サンプル画像</p>
        </a>
    </li>
</ul>

CSS

.list_card {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -10px -5px 0px;
    list-style: none;
}

.list_card > li {
    margin: 10px 5px 0px;
    background-color: #fff;
    width: calc(50% - 10px);
}

.list_card > li > a {
    display: flex;
    flex-direction: column;
    padding: 10px;
    height: 100%;
    text-decoration: none;
}

.list_card_image {
    height: 200px;
}

.list_card_image > img {
    display: block;
    margin: 0px auto;
    max-width: 100%;
    max-height: 100%;
}

.list_card_image + p {
    padding: 1em 0px 0px;
    margin: auto 0px 0px;
    text-align: center;
    line-height: 1.5;
}

@media print, (min-width: 768px) {
    .list_card > li {
        width: calc(33.3% - 10px);
    }
}

@media print, (min-width: 992px) {
    .list_card > li {
        width: calc(25% - 10px);
    }
}

モバイル表示時は一行あたり2枚、そこからウィンドウサイズに応じて段階的に3枚、4枚と一行あたりの表示枚数を増やしています
画像の表示領域である「list_card_image」クラスのheightを200pxとし、更に「list_card_image」クラスの内のimgタグのmax-widthとmax-heightをそれぞれ100%とすることで、高さ200pxの表示領域に画像が収まるようにしています。表示する画像によって、高さは適宜調整してください

キャプションの表示位置を揃える

キャプションの表示位置を統一するため、表示する画像の高さが200pxに満たない場合でも、キャプションを枠内の最下部に表示させる必要があります
この指定は、flexboxの仕組みを使用することで簡単に実現できます

.list_card > li > a {
    display: flex;
    flex-direction: column;
    padding: 10px;
    height: 100%;
    text-decoration: none;
}

画像とキャプションが収まっているaタグのflex-directionをcolumnに指定します。これで、aタグ内の要素が縦方向（上下）に並ぶようになります

.list_card_image + p {
    padding: 1em 0px 0px;
    margin: auto 0px 0px;
    text-align: center;
    line-height: 1.5;
}

更に、キャプションであるpタグの上マージンをautoとすることで、画像がどんなサイズであっても、pタグが要素内の下端に配置されるよう自動的に上マージンが取られるようになります
これでキャプションの表示位置を揃えることができます

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。