くまだどうも、くまだです。
最近CSSのaspect-ratioが便利で使っているのですが、何も考えずに全ての画像に対して使うのは違うな～と思っているのでそれのメモ。
脳死でaspect-ratioしない
aspect-ratioとはアスペクト比（縦横比）を保持するためのプロパティです。object-fitで画像をトリミングしつつ、aspect-ratioを画像に使うと、縦長や横長の画像であっても領域内に画像が収まるといった具合です。（同じことをpadding-top使ってやるやり方もあります）
よく使われるケースとしては、お知らせ一覧などのカードタイプのもので使われます。
<div class="p-cards">
<div class="c-card">
<div class="c-card__img">
<img src="images/dummy.png" alt="">
</div>
<h3>タイトル</h3>
</div>
<div class="c-card">
<div class="c-card__img">
<!-- 縦長の画像です -->
<img src="images/sample2.png" alt="">
</div>
<h3>タイトル</h3>
</div>
</div>.p-cards {
display: grid;
grid-template-columns: repeat(3,1fr);
column-gap: 10px;
}
.c-card {
border: 1px solid #333;
}
.c-card h3 {
margin-top: 10px;
}
.c-card__img img {
aspect-ratio: 2560/1702;
object-fit: cover;
width: 100%;
height: auto;
display: block;
}
便利なんで、画像系実装するとき脳死で全部に使いたいですが、それを使わなくてもいい場合もあります。下記のような場合だと、aspect-ratio使うと表示がおかしくなります。
<div class="c-img">
<img src="test.png" alt="">
</div>
<div class="c-img">
<img src="test4.png" alt="">
</div>
.c-img {
width: 100%;
height: auto;
border: 1px solid #333;
max-width: 296px;
/* 調整用 */
margin-top: 30px;
margin-left: 30px;
}
.c-img img {
width: 100%;
aspect-ratio: 296 / 60;
object-fit: cover;
height: auto;
display: block;
}
下の画像にだけさらに別なクラスを付与してaspect-ratioを上書きして調整すればいいだけなんですが…。保守性を考えるとどうだろうか…。
例えばロゴ画像などは縦横比が異なる画像に差し変わる可能性があるので、aspect-ratioやobject-fitを使うのはあまり好ましくない。別なクラスでaspect-ratio調整するケースだと、縦横比が異なる画像に指し変わったらその都度CSSで調整しなければなりません。
基本的には、
- ロゴ画像
- 記事詳細のアイキャッチ画像
などは、aspect-ratioやobject-fit使わなくてもいいかなと思います。
逆に使うべきところは、
- カードタイプのアイキャッチ画像
- 下層MVの画像
かなあと思います。どんなサイズの画像が来ても、絶対にこの領域内に画像を収めたいなら後者のイメージです。
コンテンツ内で装飾的に使われている画像も後者に入るかも。ただし、LPのような画像とテキストが単純な縦並び配置の場合はaspect-raitoは使わないです（自分だったら、ですが）。
とはいえ、どこで使ってどこで使わない、など判断に迷うときがあると思います。
その場合「縦横比固定かそうでないか」はクライアントなりディレクターさんに確認しましょう。場合によってはaspect-ratio使っていると修正が手間になることも考えられるので。
まとめると「脳死でaspect-ratioを使わない」ということ。それだけ。
ここまで読んでくださりありがとうございました。