画像を枠内に納める方法【imgタグ版あり】

前提:200 x 200の枠の中に色んなサイズの画像をおさめたい。

imgタグだけど、background-size: cover;やbackground-size: contain;みたいに実装したい時にみる記事です。
object-fit使えば、簡単に実現することができますがIEに対応していなっかたりするのでその他の実装方法も書きます。

また、background-size でも cover や contain を実装することができます。
こちらのプロパティは、クロスブラウザで対応しているので気軽に使うことができます。(IE8ではダメっぽい!!だけどIE8は切り捨てても基本的にはok)
対応状況:  https://caniuse.com/#search=background-size

HTMLは下記のようなものを使用しています。

特になにも指定しない場合

– 枠のサイズと画像のサイズがぴったりの場合
枠内にぴったりと表示されていますね。

 

– サイズが枠より大きい場合
枠からはみ出し表示されていますね。縦横2倍。

 

– サイズが枠より小さい場合
枠内に表示されていますが、左上に表示されています。(この場合は上下中央に表示したいことが多々あります)

 

– アスペクト比が異なる場合(heightが長い場合)
幅は枠と同じサイズなのではみ出さずに表示されていますが、高さが枠より長い分はみ出して表示されています。

 

– アスペクト比が異なる場合(widthが長い場合)
高さは枠と同じサイズなのではみ出さずに表示されていますが、幅が枠より長い分はみ出して表示されています。

 

以上、5つのパターンで内接リサイズ(contain)と外接リサイズ(cover)での実装例を見ていきたいと思います。
もし、何も指定しないと枠内から画像がはみ出し放題。margin-bottomで余白をあけないと画像同士が重なってエライことになってしまいます。

object-fitを使った例

対応状況: https://caniuse.com/#search=object-fit
IEとか特に気にしないよという人は、object-fitを使用するのが良いと思います。なぜなら簡単&しっくりくるリサイズのされ方になるからです。

内接リサイズ(contain)

画像の長辺を枠に合わせ画像全体が枠内に収まるようにリサイズすること。
枠と画像の比率が違う場合は、余白ができる

コードはこちら↓↓

枠のサイズ(今回の例だと、枠のサイズを200 x 200 pxとしているのでその値を設定する)とobject-fit: contain;とするだけで、内接リサイズして画像を表示してくれます。
※ .object-fit-containは、imgをラップしているdiv要素です

– 枠のサイズと画像のサイズがぴったりの場合
指定なし同様ぴったりと表示されていますね

 

– サイズが枠より大きい場合
リサイズされて枠内に表示されていますね。

 

– サイズが枠より小さい場合
画像が引き伸ばされて枠内いっぱいに表示されていますね。

 

– アスペクト比が異なる場合(heightが長い場合)
長辺(height=400px)にあわせてリサイズされて枠内に表示されていますね。

 

– アスペクト比が異なる場合(widthが長い場合)
長辺(width=400px)にあわせてリサイズされて枠内に表示されていますね。

外接リサイズ(cover)

画像の短辺を枠に合わせてリサイズすること。
枠からはみ出す部分はトリミングされるため、余白ができないように表示される。

コードはこちら↓

※ .object-fit-coverは、imgをラップしているdiv要素です

– 枠のサイズと画像のサイズがぴったりの場合
ぴったりと表示されていますね

 

– サイズが枠より大きい場合
リサイズされて枠内に表示されていますね。

 

– サイズが枠より小さい場合
画像が引き伸ばされて枠内いっぱいに表示されていますね。

 

– アスペクト比が異なる場合(heightが長い場合)
短辺(width=200px)にあわせてリサイズされて枠内に表示されていますね。(縦にはみ出た分はトリミングされています)

 

– アスペクト比が異なる場合(widthが長い場合)
短辺(height=200px)にあわせてリサイズされて枠内に表示されていますね。(横にはみ出た分はトリミングされています)

object-fitを使わない例(positionを使用)

内接(contain)

コードはこちら↓

※ .fit-containは、imgをラップしているdiv要素です

– 枠のサイズと画像のサイズがぴったりの場合

 

– サイズが枠より大きい場合

 

– サイズが枠より小さい場合

 

– アスペクト比が異なる場合(heightが長い場合)

 

– アスペクト比が異なる場合(widthが長い場合)

外接(cover)

コードはこちら↓

※ .fit-coverは、imgをラップしているdiv要素です

 

– 枠のサイズと画像のサイズがぴったりの場合

 

– サイズが枠より大きい場合

 

– サイズが枠より小さい場合

 

– アスペクト比が異なる場合(高さがある)

 

– アスペクト比が異なる場合(幅がある)

参考にさせてもらった記事

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA