サムネイル、アイキャッチ画像のサイズが異なるケースがあると思いますが、バラバラに表示されて見栄えが悪いケースが多いですよね。

今回は、画像サイズがバラバラでも指定したサイズでキレイに表示する方法を紹介します。

object-fitを利用する【オススメ】

これが一番オススメの方法です。
CSSのobject-fitというプロパティを利用します。

IE11（Internet Explorer 11）と、旧Microsoft Edge（Edgeレガシ）が対応していないため、対策する必要がありますので、後述します。

実装方法

まずは実装方法です。
imgタグに対して、縦横幅を指定したうえで、object-fitを指定します。

img {
  width: 300px;
  height: 150px;
  object-fit: cover;
}

See the Pen by tnyk35 (@tnyk35) on CodePen.0

IE、Edgeレガシ対策

fitieというプラグインを利用する

JSプラグインのfitieを利用しましょう！

ファイルをダウンロードして、読み込ませるだけで対応できるので非常に簡単です！

object-fit:cover以外、object-positionを利用したい場合はobject-fit-imagesというプラグインを利用する

もし、object-fitでcover以外を利用したい場合、または、object-positionというプロパティを利用したい場合は、object-fit-imagesというプラグインを利用しましょう。

ファイルをダウンロードして、読み込ませて以下のように設定することで動作するようになります。

/* CSS */
img {
  object-fit: cover;
  object-position: bottom;
  font-family: 'object-fit: cover; object-position: bottom;';
}

/* JS */
objectFitImages();

/* jQuery */
$(function () {
  objectFitImages();
});

これで実装完了です。

backgroundを利用する

個人的には今まではこれで対応することが多かったです。
デメリットは画像に対してaltを指定できない。SEO対策で不利になることもあります。
また画像を右クリックやドラッグ・アンド・ドロップで保存出来ないというのもデメリットになりうるかなと思います。

<!-- HTML -->
<div class-"mainContents">
  <div class="box1" style="background-image: url(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img/https://tnyk.jp/wp-content/uploads/2019/10/width100-center.jpg);"></div>
</div>

※画像ごとにクラスをあててもいいのですが、style属性で直書きしたほうが理解しやすいと思うのでこのように記述してます。

/* CSS */
.mainContents {
  width: 300px;
  height: 200px;
}
.box1 {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

positionを利用する

こちらもaltは指定できますが、画像の縦幅・横幅が、表示したい縦幅・横幅よりも小さい場合、うまく表示されないというデメリットがあります。

<!-- HTML -->
<div class-"mainContents">
  <div class="box1">
    <img src="https://tnyk.jp/wp-content/uploads/2019/10/width100-center.jpg" alt="">
  </div>
</div>

/* CSS */
.mainContents {
  max-width: 1000px;
  margin: 0 auto;
  background: #eee;
}

.box1 {
  position: relative; /* 中央寄せしたい要素の親タグにrelativeをつける */
  overflow: hidden;  /* はみ出した部分は表示しないようにする */
  height: 600px; /* 高さは固定値を入れる */
}

.box1 img {
  position: absolute;
  top: 50%; /* トップを基準に中央配置 */
  left: 50%; /* 左を基準に中央配置 */
  width: 1200px;
  height: 600px;
  margin-top: -300px;
  margin-left: -600px;
}

詳しくはこちらの記事で解説しています。

コンテンツ幅より大きい画像をリサイズせずに中央寄せで表示する2つの方法

まとめ

画像サイズが揃うだけで、デザイン的にキレイに見えますよね。
どの方法にもメリット・デメリットはあるので、見せ方などにあわせて対応をかえられるといいですね！