10行分のアフィリエイト画像

少し前の記事は久々のアフィリエイト記事だった。以前はアフィリエイト画像をfloatプロパティーで右に寄せていたが、今は幅いっぱいに10行分の高さで表示されるようになっている。右に寄せると狭い画面で更に本文が狭くなるし、狭い画面で狭くならないようにするには複雑なCSSコードを書く羽目になるので、こういう形に落ち着いた。

右(や左)に寄せない場合、画像の縦横比を維持して幅いっぱいにするか、あまり考えずに自然の解像度のまま表示するかになる。前者の場合、縦長の画像で本文がかなり下の方へ追いやられてしまう。一方、後者の場合は画像の縦横比によってどのような表示になるか読めなくなってしまう(1:10の縦横比だったりすることもある)。そこで幅いっぱいにはするものの、縦方向の長さを固定することにした。

高さを10行分に固定するにはcalc()関数を使う。フォント・サイズと行の高さを掛け、10倍すればいい。

:root {
  --font-size-default: 1rem;
  --line-height-default: 1.5;
}

.affiliate {
  height: calc(var(--font-size-default) * var(--line-height-default) * 10);
}

この設定だと15remになる。ユーザーのズームやユーザーのフォント・サイズ変更、もし利用しているならレスポンシブ・フォント・サイズに応じて、実際の大きさは変わるだろう。

画像のサイズ変更は、元画像が縦長か横長かわからないので、とりあえず幅と高さをいっぱいいっぱいにして、object-fit: containで縦横比を考慮してもらう。

.affiliate img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

このようにすると、親要素の上下左右の中央に配置される。そのため縦長でも横長でも中央に寄せられるので、どちらもそれなりにすっきりと見える。縦長では大きくなりすぎることがなくなり、横長では詰まりすぎることがなくなるわけだ。object-fitプロパティーは大きさを変えるのではなく、大きさが変化したものを調整する性格が強いことは忘れないようにしたい。

ついでにmix-blend-mode: multiplyにして、背景色となじませるようにもした。画像の色が暗くなるので好きな手法ではないが、真っ白で幅いっぱいにしてしまうと、ちょっと辛そうだったため、乗算で妥協した。filter: contrast(1.2)と組み合わせてもいいかもしれない。