サムネイルの高さ、揃えたい！CSSの aspect-ratio が便利
記事一覧に写真を並べたら、縦長・横長が混ざって高さがバラバラ。そんなときに便利なのがCSSの aspect-ratio です。画像の表示枠を同じ比率に揃えれば、元画像を一枚ずつ加工する手間を減らせます。
幅に合わせて高さを決める
aspect-ratio: 16 / 9; は「幅16：高さ9」の指定。幅が320pxなら高さは180pxになります。正方形なら 1 / 1。画面幅に合わせてサイズが変わっても、同じ比率を保てます。
サムネイルを16：9で揃える例
<img class="thumbnail" src="photo.jpg" alt="作業机の写真">.thumbnail {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}.thumbnail を付けた画像が、親要素の幅いっぱいの16：9の枠になります。object-fit: cover は、画像自体を引き伸ばさず、枠を埋めるように表示する指定です。お知らせ一覧や制作実績のカードなど、写真の見え方を揃えたい場面で使いやすいですね。
効かないときと、切り抜きには注意
幅と高さを両方固定すると、aspect-ratio でサイズは決まりません。この例では高さを auto にしています。既存CSSに固定の高さがないかも確認しましょう。
また、cover では枠からはみ出す部分が切り抜かれます。人物の顔や商品が欠けていないかは要チェック。写真ごとに object-position で表示位置を調整する方法もあります。元画像の比率をそのまま見せたい画像には、一律で指定しないほうが安心です。