【CSS】Flexbox内で高さがバラバラな画像をovject-fitで揃えて表示させる

2021年9月19日

ovject-fit自体は、このWebクリエイターボックスさんの記事で知って、ちょくちょく利用してたのだが、

1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス

今回飲食店さんのサイトで食べログの記事を引用して、横並べのFlexbox仕様にしたものが、写真の高さがバラバラで😂 ovject-fitを使いたくなったが、上のだと位置が固定で高さがpx指定前提なので、そうなるともうひと工夫必要。このページを参考でほぼそのままいけました。

サイズがバラバラな画像をレスポンシブで縦横比を揃えて表示させる – Qiita

.image-trim {
  position: relative;
  overflow: hidden;
  padding-top: 60%; /* 比率 */
}
.image-trim img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

今回は真ん中焦点で問題なかったけど、焦点（写真の中でメインの部分）がばらついていると、またもう一工夫必要かも。。
IEやEdgeでは効かないという噂もあったのだが、問題なかった。

参考

【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー | WEBDESIGNDAY

画像のサイズ調整に便利な「object-fit」をIEやEdgeに対応させる方法 | ホームページ制作・作成なら大阪のweb制作.com

CSS

Posted by ponnao