💡
横並びの画像の高さを揃えたい|HTML/CSS
作成日:
2021/04/20
0
- imgをdisplay: inline-block;指定して、imgにwidth/height 100%を指定
- これだけだと縦横比が変わってしまうので、imgセレクタの方にobject-fit: cover;を設定。画像中央でトリミングの上表示してくれる+レスポンシブで縦横比維持してくれる。
- トリミングの位置を調整したい時は、imgにobject-position:を指定。 0 100%か100% 0 を指定することで、左右どこでトリミングするかを選択できる。
国内外を転々としてきたノマド公僕|語学好き 逐語通訳|日本有数のブラックな職場への依存から脱却したいミドサー|育休中のため自分の体力が続く範囲でゆっくり前進中