横並びブロックの写真の大きさが違い高さが合わない HTML&CSS

プログラム

2026.06.06

お仕事で、ホームページ上に3つのブロックを横に並べるHTML&CSSデザインを制作しました。

各々のブロックに写真を入れます。幅は33.333%で合わせ、高さをautoに設定しました。

ところが、写真のサイズが一つづつ微妙に異なり、幅を33.333%で合わせると、高さがズレてしまい、その下のテキストの位置もズレてしまいました。

写真を配置したブロック要素に、アスペクト比などを設定することで解決しました。
今回のブロック要素のclassは、.card__imgです。

.card__img {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card__img {

aspect-ratio: 16 / 9;

overflow: hidden;

}

.card__img img {

width: 100%;

height: 100%;

object-fit: cover;

display: block;

}

ちなみに、Chat-GPTに聞いて解決しました。HTML&CSSや、Javascript、PHPのコーディングは、生成AI無しでは仕事できないです。