今回はCSSのみを使用して画像のトリミングが出来るobject-fitというプロパティを紹介します。
このプロパティを使用すれば、一々ちょうど良いサイズに画像をトリミングしてからアップロードする必要が無くなり、WEB上に綺麗に配置する事出来る様になります。
object-fitの使い方
例えば、以下のような画像を300×200pxにしたい場合width: 300px;とheight: 200px;を指定してあげると、そのサイズになります。
しかし、この場合元々の縦横比を歪めてしまい、以下のように横に伸びたような画像になってしまいます。このような見た目になってしまうことは非常に残念なので辞めましょう。
従来、このように歪んでしまう場合はローカル環境でちょうど良いサイズにトリミングしてからWEB上にアップするのが流れでした。ただ最近では今回紹介するobject-fitを使用した方法が一般的になっているようです。
object-fitの書き方
このような問題を解決するためにobject-fitは使用されます。
先程の300×200にサイズ変更した画像のCSSに「object-fit: cover;」を追加するだけで自動でピッタリなサイズにトリミングしてくれます。
img {
width: 300px;
height: 200px;
object-fit: cover;
}HTML
<div class="flex">
<div><img src="img/flower.jpg"></div>
<div><img src="img/cat.jpg"></div>
</div>
レスポンシブにも簡単に対応出来る！！
object-fitの魅力はレスポンシブ対応が超簡単な点です。よくメインビジュアルの画像や背景画像のレスポンシブ化に使用されているイメージです。
レスポンシブ化するにはwidth: 100%を付け加えるだけです。高さをheightで固定すれば、その高さを維持した状態で幅だけが画面幅に対して可変的になります。
img {
width: 100%;
height: 200px;
object-fit: cover;
}HTML
<div class="flex">
<div><img src="img/flower.jpg"></div>
<div><img src="img/cat.jpg"></div>
</div>好きな位置でトリミング
また好きな位置でトリミングをしたい場合はobject-positionを使用します。
実際の記述は以下。
img {
width: 300px;
height: 200px;
object-fit: cover;
}
.trim1 {
object-position: 0 100%;
}
.trim2 {
object-position: 0 100%;
}
.trim3 {
object-position: 0px -80px;
}
.trim4 {
object-position: 0px -50px;
}
.trim5 {
object-position: 100px 100%;
}
.trim6 {
object-position: 100px 100%;
}HTML
<div class="flex">
<div><img class="trim1" src="img/flower.jpg"></div>
<div><img class="trim2" src="img/cat.jpg"></div>
</div>
<div class="flex">
<div><img class="trim3" src="img/flower.jpg"></div>
<div><img class="trim4" src="img/cat.jpg"></div>
</div>
<div class="flex">
<div><img class="trim5" src="img/flower.jpg"></div>
<div><img class="trim6" src="img/cat.jpg"></div>
</div>トリミングせずに余白を付ける
object-fitで配置した画像をトリミングせずに配置するにはobject-fit: containを使用します。
実際の記述は以下。
img {
width: 300px;
height: 200px;
border: solid 1px #ccc;
object-fit: contain;
}HTML
<div class="flex">
<div><img src="img/flower.jpg"></div>
<div><img src="img/cat.jpg"></div>
</div>その他object-fitの値
object-fitの値は以下の種類があります。
| 値 | 意味 |
|---|---|
| object-fit: fill; | （初期値） ボックス内を満たすように縦横比を変えながらリサイズされます。 |
| object-fit: contain; | ボックスに収まるようにリサイズされます。 |
| object-fit: cover; | ボックスに収まるようにトリミングされます。 |
| object-fit: none; | リサイズせず、そのまま表示します。 |
| object-fit: scale-down; | none と contain のうち、小さい方のサイズに合わせて表示します。 |
それぞれ以下のようになります。
HTML
<div class="flex">
<div><img class="trim1" src="img/cat.jpg"></div>
<div><img class="trim2" src="img/cat.jpg"></div>
</div>
<div class="flex">
<div><img class="trim3" src="img/cat.jpg"></div>
<div><img class="trim4" src="img/cat.jpg"></div>
</div>
<div class="flex">
<div><img class="trim5" src="img/cat.jpg"></div>
</div>CSS
.flex {
display: flex;
}
img.trim1 {
width: 300px;
height: 200px;
border: solid 1px #ccc;
object-fit: fill;
}
img.trim2 {
width: 300px;
height: 200px;
border: solid 1px #ccc;
object-fit: contain;
}
img.trim3 {
width: 300px;
height: 200px;
border: solid 1px #ccc;
object-fit: cover;
}
img.trim4 {
width: 300px;
height: 200px;
border: solid 1px #ccc;
object-fit: none;
}
img.trim5 {
width: 300px;
height: 200px;
border: solid 1px #ccc;
object-fit: scale-down;
}
IEは非対応なので注意！
ここまでobject-fitの様々な使い方を紹介しましたが、IEではこのプロパティ自体が非対応となってい流ため表示崩れが起きてしまいます。しかしGithubに公開されているobject-fit-imagesを使用すれば何とか表示崩れなく表示できます。今回はその方法を紹介して終わりになります。
①まずはHTMLファイルのheadタグから以下のファイルを読み込んで下さい。
<script src="js/ofi.min.js"></script>②各画像にはobject-fit用にクラスを付けておきます。今回はobject-fitとしときます。
<img class="object-fit" src="images/image.jpg">③先程のクラスに対して以下のCSSを書いときます。ie表示用にはfont-familyを使用して色々と追加していきます。
.object-fit {
object-fit: cover;
object-position: bottom;
font-family: 'object-fit: cover; object-position: bottom;'
}④最後に</body>タグ前にie表示用の専用コードを呼び出します。objectFitImages()の中には先程指定したクラス名を入れます。
<script>
objectFitImages('img.object-fit-img');
</script>これでIEでも表示崩れなく綺麗に表示されるはずです。
以上が「画像のトリミングが出来るobject-fitの使い方(IE非対応)」でした。
このプロパティを覚えると、その便利さの虜になる事間違えないが、その代わりにIEの呪縛に囚われる用になるので注意が必要です。IEは100%捨てているって方にはめちゃくちゃおすすめです。
