img要素をbackground:coverのように親要素いっぱいに表示する方法【containのようにもできる！】

サイト内の画像一覧などの決められた枠内（例えば100×100の枠内）にimg要素で画像を配置すると、画像の比率によって上下や左右の余白に差ができてしまい、統一感が失われ見栄えが悪くなってしまいます。

かといって「画像ひとつひとつを同サイズにトリミングし、配置しなおす」というのも画像の入れ替えが発生した際には、結構な手間がかかってしまいスマートではありません。

今回はCSSで画像のトリミングを行い、img要素をbackground：coverの様にしてしまおう！という方法をご紹介します。

ちなみに使用する画像が意味を持たない完全な装飾の場合は、素直にcssのbackgroundで指定してあげましょう！

目次非表示

img要素をcover / contain化
注意点
object-fitを使用しないで親要素いっぱいに表示する方法
- cover
- contain

目次へ

img要素をcover / contain化

普通に配置すると？

300×300の枠に普通に画像を配置し(今回は800×533の画像を使用)、幅を親要素に合わせてあげると下の画像の様に画像が縦に伸びてしまいます。かわいいチワワの画像もこれでは台無しですね。

p{
  width:400px;
  height:400px;
}

img{
  width:400px;
  height:400px;
}

object-fitを記載

object-fit: cover;

先ほどのコードに【object-fit: cover;】この1行を追加してみてください。するとbackground:coverの様に画像が潰れることなく、親要素の枠いっぱいに表示されます。親要素の高さ・幅が変わっても自動でいいサイズになるのでwidthやheightは100%にしておいてもいいかもしれません。

See the Pen
imgをbackgroudの様に配置 by Hiroki Nakamura (@marurain)
on CodePen.

object-fit: contain;

【object-fit: contain;】と記載すれば、backgroud:contain;の効果と同じ様に画像の比率を保ったまま親要素の中に配置することができます。

See the Pen
imgをbackgroud:containの様に配置 by Hiroki Nakamura (@marurain)
on CodePen.

object-positionで配置位置の指定

object-fitを使用するとデフォルトでは画像の中央をベースにトリミングを行いますが、【object-position: 数値;】でトリミング位置を指定することができます。

左上を基準にして(0 0)、数値はpxまたは%で指定します。

左上　… object-position: 0 0;
左下　… object-position: 0 100%;
右上　… object-position: 100 0%;
右下　… object-position: 100% 100%;
中央　… 指定しない

注意点

この【object-fit】ですがcan I useで各ブラウザの対応状況を見てみると、IEなどチラホラ対応していないブラウザがあります。しかし！jQueryのプラグインを使うことでIEにも対応させることができます。

jQueryプラグイン【object-fit-images】をダウンロード

Githubの中の「Clone or download」と書いてある緑色のボタンを押し「Download ZIP」からobject-fit-imagesのファイルをダウンロードします。ダウンロード後、distフォルダの中のofi.min.jsを使用します。

jQueryとofi.min.jsの読み込み

先ほどダウンロードした「ofi.min.js」はjqueryのプラグインなのでjQuery本体も読み込みます。あわせてスクリプトを呼び出すコードも記述します。

/*--jQuery・プラグインの読み込み--*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/ofi.min.js"></script>

/*--スクリプトを呼び出すコード--*/
<script>
  $(function (){
    objectFitImages( /*--classの指定--*/ )
  });
</script>

HTMLとCSSを用意

HTML

HTMLで画像を配置します。このときにclass名をつけておきましょう。※今回はfit-imgとしました。

<img class="fit-img" src="/*画像URL*/">

CSS

配置した画像のclassに対してobject-fitやobject-positionを記述していきます。IEに対応させるために通常と異なるのは、font-family: ‘object-fit: cover;’を記述します。また、object-positionを指定している場合は下記の様にfont-familyに合わせて記述します。

.fit-img {
  object-fit: cover;
  object-position: bottom;
  font-family: 'object-fit: cover; object-position: 0 100%;'
}

先ほどscriptに記述したobjectFitImages()の（）の中にclass名を指定すると、特定の画像にだけ対応させることができます。

<script>
  objectFitImages('img.fit-img');
</script>

object-fitを使用しないで親要素いっぱいに表示する方法

親要素にposition:relativeを設定します。画像はposition:absoluteにし、transformなどを使って配置していきます。これだけでcoverのような状態になります。でもなんか写真がでかいぞ？どうしたらいいんだ・・・？

containのようにするにはmax-widthとmax-heightをどちらも100%に指定してあげれば比率を保ったまま配置することができます。

cover

See the Pen
imgをbackgroud:coverの様に配置（object-fit未使用） by Hiroki Nakamura (@marurain)
on CodePen.

contain

See the Pen
imgをbackgroud:containの様に配置（object-fit未使用） by Hiroki Nakamura (@marurain)
on CodePen.

以上img要素をbackground:coverのように親要素いっぱいに表示する方法でした！

あっ、img要素を配置するときは【<p>タグ】もしくは【<figure>タグ】などのブロック要素で囲みましょうね。