【CSS】特定の縦横比を指定して画像をトリミングする方法

CSSで特定の縦横比を指定して画像をトリミングする方法を共有します。

CSSで特定の縦横比を指定して画像をトリミングする方法

※ IE11に対応するため事前にプラグイン「object-fit-images」を使う (必須ではない)

1. データをダウンロード
2. ofi.min.jsを読み込み
3. スクリプトの呼び出し

使い方は下記参考

https://www.e-webseisaku.com/column/web/3690/

 

① HTMLを用意

<div class="img-wrapper">
    <img src="example1.jpg" />
</div>

 

② CSSを用意 (幅に対する縦の割合を65%と指定する場合)

.img-rwapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 65%; //幅に対する縦のサイズ
}

.img-rwapper img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  font-family: "object-fit: cover;"; //プラグイン「object-fit-images」の指定
}

 

以上です!