更新 2020 / 10 / 19

画像をコンテナーにフィットさる

記事一覧ページでサムネイル画像が並ぶページの場合、全ての画像が同じサイズ、もしくは縦横比でないと並びが崩れてしまいます。
そのサイズがバラバラになったサムネイル画像の一覧をフィットさせます。
参照元 > https://webdesignday.jp/inspiration/technique/css/7976/

HTML

                        
<div class="container">
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://webdesignday.jp/wp-content/uploads/2020/04/p7976-4.jpg" alt="">
        </div>
        <h5>タイトルタイトル</h5>
        <p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    </div>
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://webdesignday.jp/wp-content/uploads/2020/04/p7976-5.jpg" alt="">
        </div>
        <h5>タイトルタイトル</h5>
        <p>ダミーテキストダミーテキストダミーテキストダミーテキスト </p>
    </div>
    <div class="container-item">
        <div class="container-item-img">
            <img src="https://webdesignday.jp/wp-content/uploads/2020/04/p7976-6.jpg" alt="">
        </div>
        <h5>タイトルタイトル</h5>
        <p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    </di

CSS

                        
.container{
    display: flex;
    justify-content: space-between;
}
.container-item{
    width: 30%;
}
.container-item-img{
    border: 1px solid #ccc;
}
.container-item-img img{
    display: block;
    height: 150px;
    object-fit: cover;
    width: 100%;
}