新潟県妙高市|ホームページと広告の相談相手

MENU [+]閉じる [×]
CSSに1行追加!画像を指定サイズでトリミングできる[object-fit:cover;]の威力( ̄▽ ̄)

ホームページのコンテンツを更新するとき、使用する画像のタテヨコ比が一定でない場合もあるでしょう。

制作会社がPhotoshopなどを用いて画像のタテヨコ比を整えることができれば良いかもしれませんが、お客様にコンテンツの更新を行なっていただく場合、つどサイズ調整していただくのも大変です(^^;)

そこで今回は使用する画像のタテヨコ比が一定でない場合に、画像を指定サイズに収めて余りをトリミングする方法についてご紹介します(⌒▽⌒)

この記事の目次

【結論】指定サイズのトリミングはimgタグに[object-fit:cover;]を追加する!

さっそく結論です!

CSSファイルの、トリミングしたい画像のタグに[object-fit:cover;]を追加してみてください。

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

そうした結果がこちら!

夏の夜に現れた黒髪の女性かな?

もう1枚!!

バーベキューしている夏の日

ひとまず、タテヨコ共に200pxの正方形に収まっていませんか?

どういう仕組みなのか、次のセクションからご説明していきます!

ページの先頭へ戻る

[比較]ただ幅&高さだけを指定した場合

では、次は[object-fit: cover;]がない場合と比較してみましょう。

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

HTML&CSSのコーディングを経験されている方にとっては予想通りかと思いますが、長方形であってもムリヤリ正方形に収まってしまうのです(^^;)

夏の夜に現れた黒髪の女性かな?
1枚目(左)は[object-fit:cover;]あり、2枚目(右)は無し

ちょっと「つぶれている」のがお分かりでしょうか?

黒髪の女性は[object-fit:cover;]を指定した1枚目(左)では上下途中で切れています。

これは、タテヨコ比を保ったまま指定のサイズに収めて、あふれたぶんをトリミングしているので問題無しです(^^)

一方の2枚目(右)は、黒髪の女性の「つむじ」あたりも見えていますし、肩の位置も1枚目(左)と違いますよね?

これは、トリミングせずに指定のサイズに押し込んでしまった結果です(^^;)

バーベキューの写真も見てみましょう!

バーベキューしている夏の日
1枚目(左)は[object-fit:cover;]あり、2枚目(右)は無し

1枚目(左)の[object-fit:cover;]ありの写真と比べると、2枚目(右)の写真は、割り箸の後ろの黒いズボンの見えている範囲が明らかに違いますし、お肉を焼いている網の形も違って見えます。

やっぱりこちらも、タテヨコ比を考慮せずに収めてしまった結果です…(^^;)

 

こうなってしまうからこそ、これまでのコーディングでは、様々な手法が試されてきたんですよね(^o^)

あるときは、divタグの背景要素にしてみたり、またあるときは複数パターンのタテヨコ比で画像を作ってみたり。

さらにあるときは…、って、画像のトリミングで苦労されてきたコーダーさんも少なくないはずです(^^;)

でも!!

[object-fit: cover;]を使う方法があれば、これまで苦労してきたコーディングのうち、一部は解消されるかもしれません。

画像のトリミングで悩まれている方の解決法の一つになれれば幸いですm(__)m

 

(もしどうしてもダメだったらまた別の方法を試してみてください、ゴメンなさい……。)

ページの先頭へ戻る

[参考]ところで[object-fit:cover;]って何なのか!?

さて、今回のポイントを整理しておきましょうか( ^∀^)

[object-fit:cover;]って一体なんなの!?

なぜこの1行だけで、指定サイズの画像トリミング問題の一部が解決できてしまうのでしょうか??

CSSの[object-fit]プロパティというのは、そのコンテンツがどのようにページ内(またはどこかの要素内)に収まるかを定義するものです。

初期値は[fill]で、今回のimgタグで言えば2番目のセクションの「[比較]ただ幅&高さだけを指定した場合」と同様です。

今回はその[object-fit]プロパティの値を[cover]に設定したもの。

cover(カバー)なので、対象のオブジェクトを覆うようなイメージを持っていただければわかりやすいでしょうか。

[cover]の場合は[object-fit]プロパティの値を使用した要素のサイズを完全に覆いきるもののうち最小のサイズ(しかもタテヨコ比は変わらず)になります。

つまり!

黒髪の女性の写真の元々のサイズは[幅:900px/高さ:1200px]です。

バーベキューの写真のほうは[幅:1200px/高さ:900px]です。

それに対して、今回指定したサイズは[幅:200px/高さ:200px]でした。

黒髪&バーベキューの写真が指定のサイズを覆いきるには、幅と高さが200pxあれば良いことになりますよね?

しかもタテヨコ比は変わらずなので、黒髪の写真とバーベキューの写真は、幅か高さのどちらかを200pxとして、もう片方も同じ割合で縮小する(この場合、約267pxになる)のです。

そのうえで、はみ出てしまう約67pxぶんはカット、となるわけです。

こうしてめでたく、指定サイズに収まって、あまりをトリミングした画像が出来上がりました( ^∀^)

 

なお、似たような考え方で逆の意味で使われることが多いのが[object-fit: contain;]

[object-fit: cover;]が「指定の要素を覆いきる最小のサイズ」への変形でした。

一方の[object-fit: contain;]は、「指定の要素からはみ出さない最大のサイズ」です。

今回使用した2種類の画像にそちらを適用するならば、黒髪の女性写真は[幅:150px/高さ:200px]に、バーベキューの写真は[幅:200px/高さ:150px]に縮小されて、200px四方の正方形に収まることになります。

これらを応用すると、レスポンシブWebデザインでも様々な応用ができそうですね(⌒▽⌒)

ページの先頭へ戻る

【IE11対策】ライブラリ[object-fit-images]を使用する

とても便利な[object-fit: cover;]の記述。

でも、作業をしているとIE11(インターネット・エクスプローラー11)では[object-fit: cover;]が適用されないという現実に直面することがあります。

その場合、ChromeやFirefox、Safari、Edgeなどでは問題なく表示されている一方で、IE11のみ、指定されたサイズでトリミングされるのではなく、指定されたサイズに画像が押し込まれたような状態になってしまいます。

よって、指定したトリミングサイズと元の画像サイズの「タテヨコ比」が異なる場合は、画像が潰れて表示されることになります。

トリミングサイズと元の画像のサイズのタテヨコ比がかけ離れているほど、潰れ方は顕著になります。

その画像の中で多くを占めない要素であればまだしも、人が写り込んでいる場合、潰れてしまうのは避けたいもの(^^;)

そこで役に立ちそうなのが、[object-fit-images]というjQueryライブラリです。

上記のリンクの[Clone or Download]という緑色のボタンを押してzipファイルをダウンロードすると、IE11でも指定サイズで画像がトリミングされるサンプルが入っています。

ライブラリ[object-fit-images]実装方法

トリミングしたい画像のimgタグに[imgClassName]というクラス名が指定されていると仮定します。

解凍したデータの中の[dist]というフォルダにある[ofi.js]または[ofi.min.js]というjsファイルを、HTMLファイルからscriptタグで読み込むようにしてください。

次に、その記述より後に、下記のコードを追加します。

<script>
$(function () {
objectFitImages('.imgClassName');
});
</script>

jQueryを指定しただけではダメ。

こちらのCSSも、任意の箇所に追加してください(外部ファイルから読み込ませてもOKです)。

.imgClassName {
object-fit: cover;
font-family: 'object-fit: cover;'
}

「え、font-family!?」

CSSのコードを見ていると、そういう感想も出てしまいます。

どうやら、上手く行く場合はコレで上手くいくようです。

いかがでしょう?

ライブラリ[object-fit-images]を使って、画像のトリミングができたでしょうか(⌒▽⌒)??

ただ、ライブラリ[object-fit-images]を読み込んでも、IE11で画像が潰れたままになる場合があります。

もしくは「IEうんぬん以前に、他のブラウザで動いていたスライドやスムーズスクロールなどが正常に表示されない」という状況になることもあるようです……。

原因の一つとしてライブラリ[object-fit-images]の実装前に、別のjQueryを読み込んでいる場合が考えられます。

そんな場合はどうすれば良いか。

次に述べる「jQueryを使わず、IE11のみに適用されるCSSの記述方法で上下左右の中央に表示させる方法」を使ってみましょう(^^)

ページの先頭へ戻る

【iQuery競合対策】IE11のみ適用のCSSで中央に配置する

先ほどと同様に[imgClassName]というクラス名がimgタグにつけられていると仮定します。

また、 このimgタグのすぐ外を、何かしらのタグで囲っているという前提です。

囲っているタグはなんでもOKです。

aタグとかdivタグとか、スライドショーで使うならliタグの可能性もありそうですね(^^)

その囲っているタグのクラス名を[wrap]みたいな名前にしましょうか。

その場合のCSSの記述はこちらです。

<style>
@media all and (-ms-high-contrast:none) {
*::-ms-backdrop,
  .wrap {
    width: 600px;
    height: 200px;
    overflow: hidden;
    position: relative;
  }
  .wrap img.imgClassName {
    position: absolute;
    width: auto;
    height: auto !important; /*他の要素でimgタグのheight属性が指定されている場合は、こちらで[!important]が必要になる場合があります*/
    min-width: 100%;
    min-height: 100%;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
}
</style>

imgタグのheight属性に[auto]という値を指定しています。

この記述は無くても問題なく表示されることもありますが、別のCSSファイルでこのタグのheight属性に値が設定されている場合は、

[height:auto !important;]

と記述して、こちらの値が優先であることを明示すると上手く行く場合があります。

お察しの通り、画像をすぐ外で囲っている[wrap]のクラス名のwidth属性とheight属性とで、トリミングサイズを指定しています(^-^)

なお、今回の件に限らず、下記のような記述をすると、その内部に書かれたスタイルはIE11で表示された時にのみ適用されるそうです。

<style>
@media all and (-ms-high-contrast:none) {
*::-ms-backdrop,
/*IE11のみに適用される記述*/
}
</style>

IEのユーザーさんも多くを占める中、様々なブラウザで適切に表示される方法を考えていきたいものですね。

他にも「こういう方法で問題なく表示されたよ〜」という場合がありましたら、お教えください(⌒▽⌒)

ページの先頭へ戻る

今回の記事の写真には「ぱくたそ」さんのフリー素材を使用させていただきました( ^∀^)

いつもありがとうございます!

メールマガジンで最新情報をゲット!

当サイトの更新情報は、メールマガジンでもお知らせしております。
「思い出のカレンダー制作」に関する情報もあわせてどうぞ。

メールアドレスを入力してください

この記事の感想をお寄せください

[CSSに1行追加!画像を指定サイズでトリミングできる[object-fit:cover;]の威力( ̄▽ ̄)]の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。

感想投稿フォームへ

関連記事一覧:CSSに1行追加!画像を指定サイズでトリミングできる[object-fit:cover;]の威力( ̄▽ ̄)

ホームページのコーディングをしている皆さんは、要素を中央寄せにしたい場合は、どんなコードを書かれていますか? 例えばテキストを画面の、あるいはエリアの中央 …… 続きを読む

ホームページ制作をしていると、フォームの項目の一つで「チェックボックス」というものを扱う機会はあるかと思います。 また、チェックボックスを含むフォーム関連 …… 続きを読む

ホームページ制作において、デザイン修正は様々な場面で発生することがあります。 文言を変更したい場合や、要素の並びを部分的に入れ替えたい場合など、状況に応じ …… 続きを読む

Copyright (C) 妙高Web屋 All Rights Reserved.