ブログに画像を貼るとき、大きさを合わせたいなーということが、よくあります。
それが簡単にできてしまうCSSがあると聞いて、しらべてじっけんしてみました。


誰かが言った。
大きさやタテヨコの比率がまちまちの画像
toki-009-019-05c
saki-171-002_003-01t  saki15-omake-02-01-scoyan-mini
これを同じ大きさで並べたい、そんな時に便利なCSSがあると──

それがobject-fit
参考サイト様
1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス

object-fit と object-position

効かせたい画像要素に、(必要なら)適当なクラス名をつけます。
ここではofiという名前にしました。
CSSとHTMLは以下の通り。
img.ofi{
    width: 27%;
    height: 180px;
    margin: 12px;
    -o-object-fit: cover;
    object-fit: cover;
}
<img class="ofi" src="画像URL" alt="画像の説明">
widthheightmarginなど通常のプロパティはデザインに合せて適当に。
object-fit: coverで、バラバラサイズの画像が、指定した同じサイズに、いい感じにリサイズされます。
CSS3サポート後進ブラウザの Opera Mini も、ベンダープレフィックス-o-をつければちゃんと機能します。

object-fit プロパティ

object-fitプロパティに指定できる、五種類の値それぞれについて見て行きましょう。
ここでは余白が分り易いように赤いボーダーをつけています。
なお、サンプル画像は Firefox に表示させたobject-fit画像のスクショです。
    fill
    領域に合せて縦横比を変更して表示(デフォルト値)。
    これは<img>タグの初期動作と同じ、つまりobject-fitを効かせていないのと同じですね。
    ofi-fill
    cover
    幅と高さの小さい方に合わせ、はみ出した部分をトリミングします。
    大きさを揃える目的なら、これがいちばん有用な感じ。
    ofi-cover
    contain
    幅と高さの大きい方に合わせ、足りない部分は余白として表示。
    ofi-contain
    none
    元画像のサイズそのままに表示。大きい画像はトリミングされ、小さい画像は余白ができます。
    ofi-none
    scale-down
    contain と none の、小さい方のサイズで表示
    ofi-scaleDown

object-position プロパティ

画像リサイズのデフォルトの基準点は画像の中心です。
これをずらしたいときに使うプロパティです。
<img class="ofi-none" src="画像URL" style="object-position: xxxx;">
この↑xxxxの部分に指定します。
    top
    上に寄ります。
    ofi-none-top
    right
    右に寄ります。
    ofi-none-left
    以下同文
    同様に、bottomで下、leftで左に寄ります。bottom leftのように組み合わせると左下になります。
    何も指定しなければ、デフォルト値のcenter centerが適用されます。
    数値
    また、数値を指定することもできます。
    単位は pxem% など、CSSで使える単位全般。
    object-position: -30px 60px;
    ofi-none-30x60
    左に30px、下に60pxずらしたサンプル。
    object-fitcovernoneを指定していても、余白の見える位置までずれます。
    というかすこやんかわいいですね。

objectFitImages()

未対応ブラウザ対策

が…
例によって Internet Explorer と Edge が未サポート。object-fitが無効=<img>タグ本来の仕様で、領域の大きさにに画像全体を合わせるため、ゆがんで表示されてしまいます。
更に、Android Browser 4.4以前もダメ。
弊ブログへの訪問者のうち、Android OS端末のユーザー様は、ほとんど Chrome を使っていらっしゃるようなので Android Browser への対応はしなくてもいいかも?とも思いますが、IE と Edge については、ofi.js という JavaScript のプラグインで対応できるというので、ちょっと見てみました。

導入

導入方法は以下の4ステップです。
  1. JSファイルをダウンロードする

    GitHub からダウンロードします。
  2. JSファイルをアップロードする

    ダウンロードしたファイルのうち、dist というフォルダに入っている ofi.min.js(ofi.js の圧縮版)をサーバーにアップロードします。
    他のファイルは要りません。
  3. CSSの設定

    前記のCSSに、<img>要素ではまず使うことのないスタイル、font-familyを追加し、'object-fit: cover;'という文字列を指定します。
    img.ofi{
        width: 27%;
        height: 180px;
        margin: 12px;
        -o-object-fit: cover;
        object-fit: cover;
        font-family: 'object-fit: cover;'
    }
  4. スクリプトタグを貼る

    フリーエリアまたは<body>タグのなるべく下の方とかに、これを貼るだけ。
    <script src="http://(ファイルパス)/ofi.min.js"></script>
    <script>
    window.onload=function(){
        objectFitImages('img.ofi');
    };
    </script>
    関数objectFitImages()の引数には、3.で定義したセレクタ名を指定します。
    何も指定しなければ、全ての<img>タグが対象になります。

以下、蛇足

このプラグインは上記のfont-familyを読んで処理をするようですね。
こんなコードが書いてありました。
var propRegex = /(object-fit|object-position)\s*:\s*([-\w\s%]+)/g;
function getStyle(el) {
	var style = getComputedStyle(el).fontFamily;
	var parsed;
	var props = {};
	while ((parsed = propRegex.exec(style)) !== null) {
		props[parsed[1]] = parsed[2];
	}
	return props;
}
execは文字列の中のマッチするパターンを順次探していくメソッド。
変数styleから、プロパティ:値;のパターンを取り出し、まず配列parsedに格納します。パターンが存在する場合、
parsed[0] = ''; //最後にマッチした文字列(二回目以降に入る)
parsed[1] = 'object-fit';
parsed[2] = 'cover';
となるので、連想配列を使用して
props['object-fit'] = 'cover';
こうしてデータを格納したオブジェクト変数propsを返します。
未サポートブラウザではobject-fitを読めない(undefinedになってしまう)が故の、苦肉の策という感じですね…
というわけで、IE と Edge では、propsのデータをもとになんやかんやして、<img>タグが以下のように変換されます。
<img
  class="ofi"
  style="background-position: center; background-image: url(画像URL); background-repeat: no-repeat; background-size: cover;"
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='423' height='338'%3E%3C/svg%3E"
  data-ofi-src="画像URL"
>
src属性には画像URLではなく(ダミーの?)data URIスキームが設定され、画像は、実質style属性のbackground関連プロパティで表示させるよう書き換えられています。
通常の画像のような右クリックからの保存もできません。

うーん、これだと<div>タグに領域のクラスを当ててbackground指定しても同じですね。
CSSとHTMLをそれぞれ
div.fit-on-cover{
    width: 200px; height: 200px; margin: 12px; /* 適当 */
    background-repeat: no-repeat;
    background-size: cover;
}
<div class="fit-on-cover" style="background-image: url(画像URL)"></div>
とすれば、fillscale-down以外は全く同じことができます。
その際、表示位置はobject-positionではなくbackground-positionで調整します。指定の仕方は全く同じです。

あと、途中で思い出したけど
ライブドアブログのスマホ版では<img>タグの大きさ指定は無視されるんでした。
ここまで書いといて何ですが、とても便利そうなobject-fit、ウチでは使う機会は無いかも…