画像の一覧を表示することはよくあることですが、画像のサイズが全部同じ・・・ということはほとんどありません。
追加の都度、加工ソフトで編集するのも手間がかかります。
そういう時は、CSSでトリミングできるようにしておくととても便利です！
今回は「CSSに1行追加して、画像をトリミングする方法」をご紹介します。
縦長と横長の画像2種類を使用します。
まぁよくありますよね、この手のサイズの画像。
縦350px、横350pxのサイズを指定してみます。
.img{
width:350px;
height:350px;
}
[/css]
こんな感じで何とも残念な結果になります。
そこで、先ほどのCSSに「object-fit:cover;」を追加します。
.img{
width:350px;
height:350px;
object-fit:cover;
}
[/css]
縦横の比率を維持したまま、指定した枠内にぴったりはまりました。
今まではpositionとかで枠内にはまるようにするケースが多かったのですが、
1行追加するだけでOKなのでとても簡単！！
私、この方法を知った時は鳥肌が立ちました。
全身ぞわぞわチョコボ肌。
よくぞやってくれた、エライ人。
中央以外の位置でトリミングしたい場合は、object-positionを使用します。
左上を基準として、object-position:横の位置 縦の位置; を記述します。
.img{
width:350px;
height:350px;
object-fit:cover;
}
.left_bottom{
object-position:0 100%;
}
.right_top{
object-position:100% 0;
}
[/css]
右：右上（object-position:100% 0;）
パーセントだけではなく px で指定も出来るので、
細かく位置の指定をすることも可能です。
object-fitでは、cover以外にも様々な値が用意されています。
場面に応じて使い分けてみてください。
縦横のサイズ比率を維持したまま、コンテンツボックスに収まるように拡大縮小されます。
幅と高さのどちらか大きい方に合わせてリサイズします。
縦横のサイズ比率を維持したまま、コンテンツボックス全体を覆うようにして拡大縮小されます。
縦横の小さい方を基準として、はみ出た分をトリミングします。
コンテンツボックスに収まるように拡大縮小されます。
拡大縮小せず、そのまま表示します。
noneまたはcontainのうち、小さい方のサイズに合わせて表示します。
こんなに便利なobject-fit、実はIEやEdgeでは対応していません。
対応させるには、「object fit images」というJSを使用します。
導入方法については以下のサイトで詳しく紹介されています。
＞＞画像のサイズ調整に便利な「object-fit」をIEやEdgeに対応させる方法
https://www.e-webseisaku.com/column/web/3690/
一度覚えるととても便利なobject-fit、ぜひともご活用ください！
1980年6月生まれ。
秋田県在住。
地元のIT関連会社や市の機関でweb制作に携わり、2011年1月にフリーランスに。現在は子育てしながら日々業務にあたっています。