💡 横並びの画像の高さを揃えたい|HTML/CSS
作成日: 2021/04/20
0
  1. imgをdisplay: inline-block;指定して、imgにwidth/height 100%を指定
  2. これだけだと縦横比が変わってしまうので、imgセレクタの方にobject-fit: cover;を設定。画像中央でトリミングの上表示してくれる+レスポンシブで縦横比維持してくれる。
  3. トリミングの位置を調整したい時は、imgにobject-position:を指定。 0 100%か100% 0 を指定することで、左右どこでトリミングするかを選択できる。

参考URLhttps://kamuiblog.com/image-height-soroeru/


国内外を転々としてきたノマド公僕|語学好き 逐語通訳|日本有数のブラックな職場への依存から脱却したいミドサー|育休中のため自分の体力が続く範囲でゆっくり前進中