前回まで、CSSのobject-fit、object-positionプロパティの使い方をご紹介しました。

【CSS】object-fitの使い方【img要素の縦横比固定方法】

CSSに「object-fit」プロパティで「cover」を設定することにより、画像の縦横比を固定したまま指定サイズで画像を配置する方法を紹介します。他にも「object-fit」プロパティにてどのように配置するか設定することも可能。コピペで試せるサンプル付きなので、勉強にもどうぞ♪

nyanblog2222.com

2020.05.24

【CSS】object-positionの使い方【img要素の画像配置設定】

img要素などの置換要素に対して、コンテンツをどこに配置するかを設定する「object-position」プロパティを詳しく紹介します。コピペで試せるサンプル付きなので、勉強にもどうぞ♪

nyanblog2222.com

2020.05.26

ただし、前回までの記事でも記載したように、このプロパティはIEには対応しておらず、別途対応する必要があります。
今回はIEに対応させるobject-fit-imagesを使用して、object-fit、object-positionプロパティを有効にできる方法を紹介していきます。

object-fit-imagesライブラリを有効にする

まずは、object-fit-imagesライブラリを有効にしていきます。
方法は2つあり、
1つはCDNを読み込む方法。
もう1つはダウンロードしたファイルを読み込む方法。です。

CDNを貼り付ける

CDNとは、「Content Delivery Network」の頭文字を取った略称で、「コンテンツ配信ネットワーク」を指します。
簡単に言うと、ネットワーク上に配置されているファイルにアクセスできる仕組みのことです。
この仕組みを使うとサーバの負荷を一部肩代わりしてくれるようになるため、レスポンスが早くなると言われています。

htmlにscript要素を使って、CDNを読み込ませます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.js"></script>

ダウンロードしたファイルを読み込む

こちらのサイトから「Clone or download」をクリックしてダウンロードしてください。
https://github.com/bfred-it/object-fit-images

ダウンロードしたファイルの中から「ofi.js」ファイルを読み込む設定をhtmlのscript要素で設定します。

<script src="ofi.min.js"></script>

img要素にクラスを追加

object-fit、object-positionプロパティを使用するimg要素にクラスを追加します。
クラス名は任意で問題ないので、既にクラスを指定している場合はそのクラスを使っても大丈夫です。

<img src="img/01.jpg" class="object-image">

CSSに”font-family”プロパティを設定

2～5行目まではimgのサイズ設定と処理結果が分かりやすいように、背景色と境界線を設定しています。

7、8行目：object-fit、object-positionプロパティを設定しています。
10行目：IE用に「font-family」プロパティを設定します。値は7、8行目で設定した値と同じ値を設定します。

object-image{
    width: 400px;
    height: 300px;
    background-color: #999;
    border: 1px solid #666;

    object-fit: none;
    object-position: right;
    // IEのブラウザに対応
    font-family: 'object-fit: none; object-position: right;';
}

10行目があれば、7、8行目は不要なのかも？と思い、試してみましたが、object-fit、object-positionが反映されなかったので、別々に記述が必要みたいです。

JavaScriptの記述を追加

htmlファイル内の</body>の直前にscript要素を追加し、objectFitImages関数を呼び出します。

全てのimg要素に対応させる場合は引数なし。
任意のクラスに画像を対応させたい場合は引数に「img.クラス名」を設定します。
※ クラス名のみでは、反映されないので、注意してください。

// 全てのimg要素に対応
<script>
    objectFitImages();
</script>

// 指定のimg要素のクラスに対応
<script>
    objectFitImages('img.object-image');
</script>

処理結果

ここまで設定が終わりましたら、処理結果を見てみましょう。
このページをIEで開き、対応前と比較して対応後ではobject-fitが効いていることを確認してみてください。
他のブラウザでは対応前と対応後では一緒の動きをしています。

object-fit-images対応前

object-fit-images対応後

まとめ

いかがでしたでしょうか。
今回は「object-fit-imagesライブラリ」を使って、IEのブラウザにobject-fitを対応させてみました。
まだまだIEのブラウザは使用されているので、対応させて損はないと思います。
※ 2022年6月15日でサポート終了予定

4つの簡単なステップで対応ができるので、良かったら試してみてください。

今回の記事が何かの参考になれば幸いです。
ご来訪ありがとうございました。それでは♪

投稿 【CSS】object-fit,object-positionのIE対応【object-fit-images】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

画像の縦横比を固定する方法で、cssに「object-fit」プロパティで「cover」を設定することにより、画像の縦横比を固定したまま指定のサイズで画像を配置することができます。
他にも「object-fit」プロパティを使うことで、どのように配置するか設定することができます。

今回は「object-fit」プロパティの使い方と設定値の内容を詳しく紹介していきたいと思います。

object-fitプロパティ

このプロパティは置換要素である、「iframe」、「video」、「img」など要素の中身（コンテンツ）をどのようにはめ込むかを設定します。

また、コンテンツをどのように配置するかは「object-position」プロパティを使用します。

値の設定について

object-fitプロパティは複数の値を設定することができます。
設定の内容を表にまとめてみました。
要素=img、コンテンツ=画像を見立てると、分かりやすいと思います。

サンプル

それでは実際に試してみましょう。
使用するのは、こちらの画像です。

さっそく、HTMLとCSSを設定してみましょう。

<p>cover</p>
<img src="img/01.jpg" class="cover">

<p>contain</p>
<img src="img/01.jpg" class="contain">

<p>fill</p>
<img src="img/01.jpg" class="fill">

<p>none</p>
<img src="img/01.jpg" class="none">

<p>scale-down</p>
<img src="img/01.jpg" class="scale-down">

img{
    width: 180px;
    height: 60px;

    // 左端に寄せてサイズを見やすくしたかったので、設定
    object-position: left;

    // imgのサイズを分かりやすくするため、background-colorを設定
    background-color: #999;
}

.cover {
    object-fit: cover;
}

.contain {
    object-fit: contain;
}

.fill {
    object-fit: fill;
}

.none {
    object-fit: none;
}

.scale-down {
    object-fit: scale-down;
}

結果がこちらです。

cover
縦横比そのまま、画像の上下トリミング

contain
縦横比そのまま、要素の右側が空いた状態

fill
画像全体をimg要素のサイズに合わせて表示。
画像が押しつぶされたような見た目。

none
画像をimg要素のサイズに合わせて一部分切り取っている。

scale-down
このサンプルでは、containが適用されています。

このように値「contain」「cover」「none」「scale-down」を使えばアスペクト比を変わらずコンテンツを設定することができます。
状況に応じて使ってみてください。

ただし、このプロパティは残念ながらIEには対応しておりません。
また、このプロパティを対応させるためには、cssかHTMLの属性でサイズを設定する必要があります。
object-fitプロパティが対応されていない！状況に陥りましたら、まずはサイズが設定されているかを確認してみてください。

まとめ

今回はobject-fitプロパティの使い方をご紹介しました。
要素のサイズさえ指定できれば値の設定も簡単なので、使いやすいかと思います。

ただ、先述しましたようにIEでは、現在（2020年5月）使用することができません。別途対策が必要になりますね！
IE対応する方法として「object-fit-images」について以下の記事で紹介していますので、宜しければご覧ください♪

【CSS】object-fit,object-positionのIE対応【object-fit-images】

CSSのobject-fit、object-positionプロパティはIEに対応していません。なので、object-fit-imagesを使用して、IEに対応させる方法を紹介します！　object-fit、object-positionの使い方については前記事で触れていますので、良かったら一緒にどうぞ♪

nyanblog2222.com

2020.05.27

【CSS】object-positionの使い方【img要素の画像配置設定】

img要素などの置換要素に対して、コンテンツをどこに配置するかを設定する「object-position」プロパティを詳しく紹介します。コピペで試せるサンプル付きなので、勉強にもどうぞ♪

nyanblog2222.com

2020.05.26

また、こちらの記事も良かったら覗いてみてください♪

投稿 【CSS】object-fitの使い方【img要素の縦横比固定方法】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。