CSSで画像をトリミングしよう！便利な「object-fit」プロパティ

CSSを使って画像をトリミングする

Webサイトを作っていくと写真の縦横比で悩まされる事も多いのではないでしょうか。

見た目の問題で、写真の下に来る文字の先頭を揃えたい！！という事はよくあるもの。
作り初めの頃は写真を撮影する時に縦横に注意したり、撮影後の写真をトリミングして表示を均一にしたりと熱心に作業できるものですが、何年も経つと煩わしくなってきたりするものです。
そうでなくても使いたい写真が求める比率と異なっていたり、比率を意識しないで偶然撮影した写真の写りが良くて採用したい！といった場合もあるでしょう。
作業した時期によって写真の高さが変わるのは気になる物ですね。
ですがCSSを使って初めにしっかり作り込んでおけば、特に作業をする事なく問題を解消する事ができます。

object-fitを使って簡単にトリミング

「object-fit」というプロパティを使って簡単にトリミングしていく方法を紹介します。
という事でこちらの画像……秋の新潟駅前の写真を使って試していきましょう。

画像の中央でトリミングする

例えば縦横300pxの中に収めるようにトリミングする場合、切り抜きたい大きさを指定して、「object-fit」を使って「cover」を指定します。

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

以上。
これだけで縦横300pxの要素内に写真が比率を崩すことなく収まりました。


※但しIE11では非対応の為、正常に動作しないので別途JavaScriptなどで制御が必要です。

上下左右の本来余るはずの部分を切って、枠内に収めてくれる方法ですが、切らずに足りない部分に余白を持たせて枠内へ収める事もできます。 その場合は「cover」ではなく「contain」を指定します。
するとこんな感じになります。


※わかりやすくするために背景色をつけています。

横長の写真なので正方形の枠内に収めると上下に余白ができていますね。
もし縦長の場合は左右に余白ができますよ。

位置を調整してトリミングする

中央を切り抜けるのは便利ですが、いつも中央に見せたい物が映っているとは限りませんよね。
場合によっては右側、あるいは左側に見せたい物が寄っている事もあるかもしれません。
位置を調整してトリミングできたら便利ですよね……大丈夫、できます。
「object-position」を使って横と縦の位置を指定すればOK！

左上を基準にして位置を指定します。
object-position: 横方向 縦方向;で数値を指定します。

例えば右下を切り抜くなら「object-position: 100% 100%;」
右上なら「object-position: 100% 0%;」
といった具合に指定します。
ではやってみましょう。右下を切り抜いてみようと思います。


いい感じですね。
この要領で左下を切り抜くなら「object-position: 0% 100%;」
左上なら「object-position: 0% 0%;」で切り抜く事ができます。
位置の指定する値なので、当然ながら50%や30%といった数値を指定して調整することもできますよ。

もちろん指定する単位は%ではなくpxでも大丈夫です。


上の写真で「object-position: -50px 0px;」を指定してみました。
細かな調整ができますが、使ってみると使いづらい印象です。
%指定で行った方が簡単かもしれません。

CSSを活用して思い通りの表示を作ろう

CSSを使って数年前ではできなかったことが沢山できるようになりました。
それこそJavaScriptを使わなければ実現できなかったことや、画像を貼り付けなければイメージ通りにならなかったことも今やCSSを使ってある程度再現できてしまう時代です。
最新のブラウザを基準にすれば大抵のことはできてしまうように思います。
ですが注意すべきなのがIE11の存在です。
既に後継となるEdgeがリリースされていることもあり、新しい機能についていけなくなっています。
2021年8月17日にはMicrosoft365アプリおよびサービスにおけるIE11のサポートを終了する事がアナウンスされている事もあり、利用ユーザーも減少するかもしれません。
しばらくするとあまり気にせず新しい機能をどんどん使う事ができそうですね。
動作環境でIE11をサポートしなければならないから実現できなかった事や、様々なJavaScriptを使って補助していた部分が減らせるなど、様々なメリットが見えてきそうですね。