CSSオブジェクトフィットを使用して画像を拡大縮小およびトリミングする方法

序章

画像を操作するときに元のアスペクト比を維持したいというシナリオに遭遇する可能性があります。 アスペクト比を維持すると、画像が引き伸ばされたり押しつぶされたりして歪んで表示されるのを防ぐことができます。 この問題の一般的な解決策は、background-imageCSSプロパティを使用することです。 より現代的なアプローチは、object-fitCSSプロパティを使用することです。

この記事では、fill、cover、contain、none、およびscale-downの値の効果について説明します。 object-fit CSSプロパティと、画像の切り抜きと拡大縮小の方法。 また、object-position CSSプロパティと、それが画像をオフセットする方法についても説明します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

• CSSプロパティと値を理解する。
• CSS宣言をスタイルプロパティとインラインで使用します。
• コードエディタ。
• object-fitおよびobject-positionをサポートする最新のWebブラウザー。

サンプル画像のデフォルトの動作の観察

サンプル画像を表示するために使用される次のコードについて考えてみます。

<img
  src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
  width="600"
  height="337"
  style="width: 600px; height: 337px;"
  alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 600 x 337."
/>

このコードは、ブラウザで次の結果を生成します。

この画像の元の幅は1200ピクセル、高さは674ピクセルです。 img属性を使用して、幅が600および337（元の寸法の半分）に設定され、アスペクト比が維持されます。

ここで、レイアウトが画像の幅が300ピクセル、高さが337ピクセルになると想定している状況を考えてみます。

<img
  src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
  width="600"
  height="337"
  style="width: 300px; height: 337px;"
  alt="Sample image of a tutle riding on top of an alligator that is swimming in the water - scaled to 300 x 337."
/>

このコードは、ブラウザで次の結果を生成します。

結果の画像は元のアスペクト比を保持しなくなり、視覚的に「押しつぶされた」ように見えます。

object-fit: fillを使用する

fillの値は、object-fitの初期値です。 この値は、元のアスペクト比を保持しません。

<img
  ...
  style="width: 300px; height: 337px; object-fit: fill;"
  ...
/>

このコードは、ブラウザで次の結果を生成します。

これはブラウザレンダリングエンジンの「初期」値であるため、拡大縮小された画像からの外観に変化はありません。 結果の画像はまだ押しつぶされたように見えます。

object-fit: coverを使用する

coverの値は元のアスペクト比を保持しますが、画像は使用可能なすべてのスペースを占有します。

<img
  ...
  style="width: 300px; height: 337px; object-fit: cover;"
  ...
/>

このコードは、ブラウザで次の結果を生成します。

特定の状況では、object-fit: coverによって画像がトリミングされたように見えます。 この例の画像では、宣言された幅の範囲内に収まらないため、左右の元の画像の一部が表示されません。

object-fit: containを使用する

containの値は元のアスペクト比を維持しますが、画像は使用可能なスペースの境界を超えないように制限されます。

<img
  ...
  style="width: 300px; height: 337px; object-fit: contain;"
  ...
/>

このコードは、ブラウザで次の結果を生成します。

特定の状況では、object-fit: containにより、画像が使用可能なすべてのスペースを埋めることができなくなります。 この例の画像では、宣言された高さが縮小された高さよりも高いため、画像の上下に垂直方向のスペースがあります。

object-fit: noneを使用する

noneの値は、画像のサイズをまったく変更しません。

<img
  ...
  style="width: 300px; height: 337px; object-fit: none;"
  ...
/>

このコードは、ブラウザで次の結果を生成します。

画像が利用可能なスペースよりも大きい場合、画像はトリミングされて表示されます。 この例の画像では、左、右、上、下の元の画像の一部が、宣言された幅と高さの範囲内に収まらないために表示されません。

object-fit: scale-downを使用する

scale-downの値は、containまたはnoneのような画像を表示しますが、どちらが小さいかによって異なります。

<img
  ...
  style="width: 300px; height: 337px; object-fit: scale-down;"
  ...
/>

このコードは、ブラウザで次の結果を生成します。

この例の画像では、画像はcontainのように動作するように縮小されています。

object-fitおよびobject-positionを使用する

object-fitの結果の画像がトリミングされて表示される場合、デフォルトでは画像は中央に表示されます。 object-position プロパティを使用して、フォーカスポイントを変更できます。

前のobject-fit: coverの例を考えてみましょう。

次に、X軸上の画像の表示部分の位置を変更して、画像の右端を表示します。

<img
  ...
  style="width: 300px; height: 337px; object-fit: cover; object-position: 100% 0;"
  ...
/>

このコードは、ブラウザで次の結果を生成します。

この例の画像では、カメは画像から切り抜かれています。

最後に、使用可能なスペースの境界外で位置が指定された場合に何が起こるかを観察してみましょう。

<img
  ...
  style="width: 300px; height: 337px; object-fit: cover; object-position: -20% 0;"
  ...
/>

このコードは、ブラウザで次の結果を生成します。

この例の画像では、カメとワニの頭が画像から切り取られています。 画像の左側にある20% ofオフセットを構成するための間隔もあります。

結論

この記事では、object-fitおよびobject-positionCSSプロパティで使用できる値について説明しました。

object-fitは、の継承、初期化、および未設定もサポートします。

プロジェクトでobject-fitを使用する前に、Can I Use？のブラウザサポートをチェックして、対象読者が使用するブラウザでサポートされていることを確認してください。

CSSの詳細については、CSSトピックページで演習とプログラミングプロジェクトを確認してください。