CSSで画像をトリミングして表示したい – アットクリエイト　スタッフブログ

管理画面で画像を登録して、システムで吐き出す。
こういう形を取っていると、どうしても画像のサイズにばらつきが出やすいです。

SNSなどで、投稿時に編集してトリミング…できればいいのですが、予算的にもそういった機能の追加が厳しかったり。

CSSで何とか出来ないものかと調べていたら、どうやら方法があるようでしたので、ご紹介します！

今回使用するのはCSSの「object-fit」。

対象となるimgに対して、このCSS「object-fit: cover;」を設定してあげるだけです！

【サンプル：object-fitがない時】

【サンプル：object-fitがある時】

【CSS】

p.sample02 img{
width: 200px;
height: 200px;
object-fit: cover; /* これだけ */
}

上のサンプルは、正方形（縦横200px）になるようにCSSを設定しています。
横長でも縦長でも、これひとつ加えてあげれば、あっという間にトリミングです。

ああ、たったの1行追加するだけでこんなにあっさりトリミング表示が…

はい、「嘘つけ」って思ったそこのあなたは、よく見ていらっしゃいます。

今回僕が対応したケースの場合、これだと不十分なんです。
レスポンシブのサイトで、画像幅が可変の要素に対して、このトリミングを行わないといけなかったので。

この「object-fit」、有効化するには、縦・横のサイズを指定する必要があります。
レスポンシブなどで横幅をパーセンテージで可変にしている場合、高さもそれと同じ値を指定しないといけません。

端末によって幅なんて変わるのに、同じ高さなんてどうやって…

もったいぶるのはやめましょうか。
昔ならともかく、今ならこういう方法があるじゃないですか。

 p.sample02 img{
width: 40vw;
height: 40vw;
object-fit: cover;
}

そうです、「vw」！
今の「width」「height」には、vwという素敵な単位があります！

vw：（viewport width）ビューポートの幅に対する割合
（40vwの場合は、ビューポート幅の40％という意味です）

要約すれば、端末の横幅に対する割合を指定する事ができます。
（例えば上記の場合、端末横幅が320pxならその40％の128px）
これを、「width」「height」両方に指定してあげれば、レスポンシブのサイズ可変画像だろうと、正方形トリミングが可能！

「vw」はビューポートの幅に対する割合ですが、その値そのものは「height（高さ）」にもちゃんと適用できるところがミソですよね。
「height: 40vw;」は、高さに対する割合じゃなくて、ちゃんと横幅の40％の値が適用されています。
（目からうろこが落ちたのは僕だけだろうか…？）

ビューポートの高さに対する割合を指定する「vh」という単位もあります。
他にもまだ少しありますが、そちらはぜひ参照サイトもご覧ください。
丁寧に調べてくれています。

というわけで「object-fit: cover;」と「vw」を合わせれば、画像の正方形トリミングも、レスポンシブだって恐くありません！

【参照サイト】