CSSでobject-fitを使わずに特定の縦横比に画像をトリミングする方法

CSS初心者の方が「サイズがバラバラの写真をトリミングして縦横比を揃えて綺麗に表示したい」と思った時に、「CSS　画像トリミング」なんてググると 、まず出てくるのが”object-fit”ではないでしょうか。たった1～2行ほどのコードを書き加えるだけで画像が綺麗にトリミングされます。「おおーっ！」って感じですよね。

しかし残念ながら”object-fit”は、IEでサポートされていません。IEはもう更新されませんから、ユーザーが居なくなるまでは実務では使いづらいところです。IEでも使用できるようにするスクリプトも出回っていますが、「面倒くさくて、そんなもん入れたくない」という人も多いでしょう。そこで、今回は”object-fit”やjavascriptを使用せずに、CSSだけで画像を特定の縦横比にトリミングする方法を書いてみたいと思います。縦横比に合わせるので、レスポンシブレイアウトでも問題ありません。

使用する画像

最初に使用するサンプル画像です。よく使われる16:9と4:3の縦横、それに正方形の元画像を用意してみました。 横に3枚並びになるように横幅は30％にしてあります。
※カッコ内は画像の元サイズです。

当然ですが、横幅が30%に固定されていますので、縦サイズがバラバラになって見た目が最悪ですね。このままではサムネイルみたいな使い方はちょっと辛いです。

完成形のサンプル画像

上の元画像は、縦長・正方形に近い形・横長と、形がバラバラですが、下の画像では全く同じ画像をトリミングして、縦横比3：4で表示しています。

どうでしょうか？綺麗に収まりましたね。サムネイルやギャラリーのように、他で使用している画像を並べたいという時には、十分なクオリティーではないでしょうか。

次からは汎用性の高いトリミングのパターンごとにコードを載せていきます。

共通のHTML

HTMLコードです。このページのように”横に3枚並べる”など、トリミングと無関係の部分は割愛しています。

HTML

HTMLは簡単、1つ外側に囲み要素を作ってあげるだけです。これに、お好きなクラス名を付けてあげます。今回は、”trim-wrap”としました。要素はdivにしてありますが、figureでもいいですね。

CSS

imgタグを囲ったら、次はCSSです。よく使う形として、正方形にトリミングするパターンと縦長3:4のパターンを載せておきます。どちらのパターンも、使用する画像の縦横比が1:1の正方形から、16:9の縦横両向きまでを綺麗にトリミングできるように調整してあります。囲み要素の”trim-wrap”には、仮に幅200pxと指定してあります。

※widthやheightに指定してあるauto、max-heightに指定してあるinitialは、それぞれを初期化しています。サイトによっては既にwidth:100%などの指定がしてあるからです。環境に合わせて必要なければ削除しても問題ありません。

3:4にトリミング

以下は、縦横比3:4のやや縦長の形にトリミングするコードです。上の完成形サンプルと同じですね。

正方形にトリミング

正方形にトリミングした例

正方形もなかなかいいですね。こちらの方が、計算が楽です。。

上記の2つのコードで上手くいかない場合は、元々ページに適用されているCSSのimgタグに関する指定が邪魔をしていないか確認してみて下さい。

最後に

今回は、かなり幅広い縦横比に対応させているので緻密さには欠けますが、サムネイル的な使い方なら十分だと思います。実際はもう少し使用される画像の形は限られている事がほとんどかもしれません。サイトの画像使用状況に合わせて微調整すれば、もっと精度の高いトリミングもできますね。

今回ご紹介したコードでは、表示エリアに対して画像のサイズが小さい場合は、拡大はされずに表示エリアの上下中央に表示されます。

max-widthで179%や224%と指定していますが、これは計算上の数値でピッタリと指定すると、ブラウザによって少しだけ周囲に隙間ができてしまうためです。ちょっとだけ大きめに指定しています。また、計算式は変わりますが、max-widthは初期値にして、max-heightで指定する事も可能です。