【CSS】object-fitを使わずに画像比率を保ったまま、レスポンシブ表示させる方法（JSなし、IE11対応）

画像の比率を保ったまま表示させる方法として、CSSの「object-fit」というプロパティーがありますが、IE11は object-fit に対応していないため、IE11でもきちんと表示させたい場合は使うことができません。
また背景画像にして、「background-size:cover」を使う方法もありますが、背景画像も使えない、なんて場合に役立つ方法のご紹介です。

実際、WEB制作の案件で、少し前にこの状況になったので、まとめてみました。

max-wideとmax-widthを使う

まずは、話を分かりやすく進めるため、幅を固定した状態から説明していきます。

縦200ピクセル横200ピクセルの範囲に比率を保ったまま表示させる場合は、imgに対して

img {
  max-width: 200px;
  max-height: 200px;
  width: auto;
  height: auto;
}

と指定するだけです。

これで、縦200ピクセル横200ピクセルの範囲に、比率を保ったまま収める事ができます。

実際のサンプルは下のリンクから確認できます。

【CSS】object-fitを使わずに画像比率を保ったまま、レスポンシブ表示させる方法（JSなし、IE11対応）の実例サンプル
https://gihoh.net/entry_sample/20190405/

レスポンシブデザインに対応させる

レスポンシブデザインの場合、先の例のように幅を固定してしまうと、余白ができてしまう場合や、逆に表示がはみ出してしまう場合があります。
そういう場合は、外側のボックスに可変の幅を設定し、画像は

img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

というように、100%でサイズを指定してやれば、うまく表示させることができます。

実際のサンプルは下のリンクから確認できます。

【CSS】object-fitを使わずに画像比率を保ったまま、レスポンシブ表示させる方法（JSなし、IE11対応）の実例サンプル
https://gihoh.net/entry_sample/20190405/

ちなみに、サンプルページで指定している

position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);

は外側の要素に対して画像を中央配置にするために設定しています。

高さも可変に対応させる

先の例では高さを200pxに固定していましたが、高さも幅に合わせて比率を保ちたい場合は疑似要素を使って、高さも可変に対応させます。

具体的には

HTML

<ul class="clearfix">
  <li><div class="inner"><img src="http://placehold.it/100x100" alt="画像1"></div></li>
  <li><div class="inner"><img src="http://placehold.it/200x200" alt="画像2"></div></li>
  <li><div class="inner"><img src="http://placehold.it/500x500" alt="画像3"></div></li>
  <li><div class="inner"><img src="http://placehold.it/350x150" alt="画像4"></div></li>
  <li><div class="inner"><img src="http://placehold.it/150x350" alt="画像5"></div></li>
</ul>

CSS

li {
  position: relative;
  float:left;
  width: calc((100% - 50px) / 5);
  margin: 0 5px;
  border: solid 1px #ccc;
}
li::before {
  content:"";
  display: block;
  padding-top: 100%;
}
li .inner {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

と設定します。

何をしているかと言うと、liに対して、疑似要素を追加し「padding-top」を指定します。
paddingtop の値を「100%」にしているのは、横幅との比率を「1:1」にするためです。比率を「4:3」にしたければ「75%」、「2:1」にしたければ「50%」のように指定します。

実際のサンプルはこちら。

【CSS】object-fitを使わずに画像比率を保ったまま、レスポンシブ表示させる方法（JSなし、IE11対応）の実例サンプル
https://gihoh.net/entry_sample/20190405/

サンプルページで、ブラウザの幅を変えてもらえば、比率を保ったままサイズが変わるのがわかると思います。

まとめ

ということで、CSSの「object-fit」もJavaScriptも使わずに、画像比率を保ったまま、レスポンシブ表示させる方法の紹介でした。
マイクロソフトが、Internet Explorer の使用をやめるよう要請があった事が、話題になったりもしましたが、
まだまだ、IE11に対応してほしいという条件でWEB制作の依頼はあるので、今回紹介した方法も活用してもらえたらと思います。