フォーラムへの返信
-
画像の大きさを揃えるには2つの方法があります。
1. 画像をトリミングする
2. 画像を表示する枠のサイズを指定してそこに画像を表示する(1)の場合は Photoshop や WordPress のメディアライブラリで画像をトリミングすることになります。例えば全ての画像を300×300にトリミングするなどです。メディアライブラリの場合は下記からトリミングできますが、かなり使いにくいので個人的には Photoshop など PC のソフトで編集するほうが良いと思います。
(2)の場合は、例えば300×300の枠を HTML でつくって、そこの中に画像を配置する方法です。このとき、画像が300×300より大きかったり小さかったりする場合は画像が300×300になるように引き伸ばしたり、縮めたりすることになります。画像の画角が枠の画角と違う場合は一部が強制的に切り取られ（るようにみえる）、枠にぴったり収まるように表示されます。
水平パネルブロックの場合は(2)のパターンで、50%x100%の枠内に画像を表示していますので、文章量が減ったり増えたりしてブロックの高さが変わると画像枠の高さも変わり、画像が拡大したり縮小したりします。これに「画像を上下にくっつけない」的なオプションを追加するとしたら、枠の大きさを50%x100px（のような固定値）にするか、50%x50%にするか、50%x自動（画像のもともとの高さに応じる）になりますが、いずれの場合ももともとの画像のトリミングをしっかりしていないと、商品自体が枠からはみ出たり枠内に小さく納まりすぎたりする問題は発生すると思います。
汎用性を考えると「50%x自動（画像のもともとの高さに応じる）」にしたほうが良いと思うのですが、「商品画像のサイズを揃える」となると汎用化が難しいので CSS で枠の大きさを固定してしまったほうが良いかもですね…。
例えば「画像の高さを130pxに固定して、ブロックの高さが130pxを超える場合は画像を中央揃えるにする」の場合は下記のような CSS になります。
@media (min-width: 40em) { .smb-panels__item--horizontal > .smb-panels__item__figure { align-items: center; display: flex; } .smb-panels__item--horizontal > .smb-panels__item__figure img { max-height: 100%; height: 130px; } }Who liked: No user
