カードコンポーネントとは

ユーザーにたくさんの情報を確認してほしい時に、同じ機能・カテゴリを持つアイテムを整列された状態で一覧で表示したい場面で使われるレイアウトです。
簡単に説明すると、アイテムごとに見出しとコンテンツ抜粋文をセットにしたリストアップだけでは、情報としてユーザーの興味を引く効果が低い為、アイキャッチ画像を加えた形が一般的となっていますので、 ECサイトの商品リスト、ギャラリー・ポートフォリオサイトのサムネ付き画像リストなど、様々なWebページで使われています。
レイアウト構築の基本やボックスモデルさえ理解していれば、カード1枚を作るのに然程時間が掛りません。しかしここでのポイントはアイキャッチ/サムネ画像のコンテナ(親要素)サイズを固定したうえ、画像そのものの比率を維持することです。

コンテナ内の画像サイズを維持する

先ずは土台となるカードリストを用意します。
ここでは、コンテンツの中身が「画像」⇒「見出し」⇒「本文の抜粋」の順で並べるタイプのカードを作っていきます。

<ul>
<li>
<figure><img src="sample.jpg" alt="sample" /></figure>
<div>
<h3>Title</h3>
<p>Message</p>
</div>
</li>
</ul>

• １．親要素のリスト(ul > li)を用意し、カードの数を3つとします（li * 3）
• ２．カードコンテナ内に「画像のコンテナ(figure)」と「画像(img)」を追加
• ３．さらに「見出し」＋「本文の抜粋」を追加
• ４．CSSで横並びレイアウトを作る

ul {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    margin: 0;
    align-items: flex-start;
    padding: 0;
}

li {
    flex-basis: 31%;
}

方法１：【padding-top】

これまでのカードコンポーネントの画像部分を作るのに、コンテナ自体の高さを0にし、「padding-top」で高さの計算を行うことで、 後に配置する画像そのもののアスペクト比を維持していました。同時に「img」を絶対配置にした上、コンテナに「overflow:hidden」を追加する必要もあります。

• 画像に絶対配置をかける
• 画像コンテナ：「padding-top：値%(アスペクト比)」
• 画像そのもの：「height: 100%」+ 位置調整

.figure{
    position: relative;
    padding-top: 75%;
    overflow: hidden;
}

.figure img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
}

「height」ではなく、「padding-top/padding-bottom」を利用して高さを作り出すので、少々強引に感じることあるし、なかなか自力では思いつかない方法でもありますが、 絶対配置をさせることで、画像の配置する場所を細かく調整することができます。

方法２：【aspect-ratio】+【object-fit】

近年CSSの機能大幅にアップグレードしたことにより、コンテナに画像や動画コンテンツを埋め込む方法も増えて、さらにコンテンツのアスペクト比を直観的設定できるプロパティも ほぼすべてのブラウザにサポートされたことから、今では特に注意することなく使用出来ます。
早速実装方法を見ていきましょう。

• １．「aspect-ratio」の値でアスペクト比を決める
• ２．「object-fit」で画像をコンテナ全体に埋める様に設定する

ul img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

こちらの方法で実装する際に、主にアスペクト比のみを意識すれば非常に少量なコードでカードコンポーネントが作れます。
但し、「object-fit」はアスペクト比を維持した状態でコンテナ内いっぱいになる様に画像を埋め込むことは出来る為、アイキャッチ画像であれば縦横比がバラバラの画像でもそこまで気にしないと思いますが、 被写体や文字などが画像内に入っている場合、一部が切り取られた様になることもあります。
結論として、画像書き出しの際にアスペクト比を多少考慮すれば大きな問題は起きることはないと思います。