[CSS3] CSS の object-fit プロパティと object-position プロパティの使用（译）_html/css_WEB-ITnose

元のアドレス: https://www.sitepoint.com/using-css-object-fit-object-position-properties/

タイトル: CSS のオブジェクトの使用-fit および object-position プロパティ - CSS object-fit および object-position プロパティの使用

Web サイトでビデオおよび画像リソースが使用されている場合、位置の問題が発生する可能性があります。

たとえば、CSS で画像の幅を明示的に指定しました。幅がパーセンテージまたは単位比として指定され、高さが適応自動に設定されている場合、ブラウザ ウィンドウのサイズを変更しても画像のアスペクト比が維持されます。

ただし、スペースが限られており、画像の高さに制限を設定する必要がある場合があります。次に、ブラウザのウィンドウ サイズを変更すると、画像のアスペクト比に確実に影響します。

今説明した問題を含め、画像のサイズとアスペクト比に関連する多くの問題は、CSS の object-fit プロパティと object-position プロパティを使用して解決できます。

これらのプロパティは、よりよく知られている背景サイズおよび背景位置プロパティに似ています。したがって、これまで聞いたことがなくても、それらがどのように機能するかを理解するのにそれほど問題はありません。

両方の属性は要素を置換するために使用されます。ただし、物事をシンプルにするために、この記事では置換要素の代わりに画像を使用します。

object-fit と object-position を使用する理由

background-size と background-position が使用できるのに、なぜこれら 2 つのプロパティを使用する必要があるのか​​疑問に思われるかもしれません。実際、少なくとも 2 つの正当な理由があります。

まず、このシナリオを考えてみましょう。記事の一部である画像リソースがあります。上記のように CSS で画像のサイズを設定した場合、ブラウザ ウィンドウのサイズを変更すると画像のアスペクト比が崩れます。このような場合、単純な img タグでは何もできないため、div 経由でbackground-sizeプロパティとbackground-positionプロパティを使用する傾向があります。

もう 1 つの理由は、object-fit 属性と object-position 属性は適用できるが、background 属性は video 要素に適用できないためです。したがって、ビデオ要素を表示する必要がある場合は、object-fit と object-postion が唯一のオプションです。

objcet-fit 属性について

この属性は、画像やビデオなどの置換コンテンツがコンテナ内でどのようにレイアウトされるかを決定します。可能な値は 5 つあります:

• fill
• contains
• cover
• none
• scale-down

これらは次のように使用されます:

.fit-image {  object-fit: fill|contain|cover|none|scale-down;} 

fill 値を使用すると、画像がコンテナーを完全に埋めます。以下の例では、画像の高さがボックスの高さ内に正確に収まります。これは object-fit のデフォルト値でもあります。

CodePen の「Pen Object Fit: Fillby SitePoint (@SitePoint)」を参照してください。

contains 値は、画像がコンテナーのアスペクト比に適合するように画像を調整します。 。これには 2 つの目的があります。画像をコンテナ内に保持しながら、画像の歪みを回避します。画像がコンテナを完全に埋めていない場合は、空の部分をデフォルトの背景色で埋めます。

CodePen の Pen Object Fit: Containby SitePoint (@SitePoint) を参照してください。

画像のサイズがわからないが、既知のコンテナーに画像をフィットさせたい場合。 width には、contain 値を使用できます。

アスペクト比を維持しながら画像をコンテナに完全に埋めたい場合は、cover 属性を使用する必要があります。以下の例では、最小部分がコンテナ内に完全に収まるように画像が拡大縮小され、コンテナからはみ出す部分は切り取られます。

CodePen の Pen Object Fit: Coverby SitePoint (@SitePoint) を参照してください。

画像の元のサイズを表示し、コンテナーによって設定されたサイズを無視するには、none を使用する必要があります。以下の例では、画像のサイズは変更されていません。ただし、画像の一部がコンテナの外にはみ出している場合、その部分は切り取られます。

CodePen の SitePoint (@SitePoint) による Pen Object Fit: None を参照してください。

最後のオブジェクト フィット値はスケールダウンです。名前が示すように、画像を縮小します。これは、画像に応じて none または include に設定した後、最小値が調整されたサイズとして使用されることを意味します。言い換えれば、イメージ内のどの寸法もコンテナ内のそれぞれの寸法よりも大きくない場合、何も有効になりません。

CodePen の SitePoint ( @SitePoint) による Pen Object Fit:scale-down を参照してください。

object-position プロパティ

前に見たように、cover プロパティは Fills になります。画像の元のアスペクト比を維持しながらコンテナーを作成します。画像もデフォルトでは中央に表示されます。焦点が中心点にある場合、これは理にかなっています。しかし、焦点が中心点ではない場合はどうなるでしょうか?

この時点では、objcet-position 属性が役に立ちます。これは、background-position と同じように機能します。次のコードは、画像の配置を左上に設定します。

.zero-zero {  object-position: 0px 0px;} 

你可以通过使用百分比来指定图片的位置而不仅仅是像素。例如， object-position:0% 0%就是左上角而 object-position: 100% 100%就是右下角。使用百分比在你不知道图片的尺寸时很有用。

当图像的宽高比和你的容器很相似的时候，设置 object-position并不会带来什么变化。但是，但宽高比不一样的时候这会带来很好地结果。下面的代码可以证明我的观点。

See the Pen GZewMJby SitePoint ( @SitePoint) on CodePen.

在第二个案例中通过设置 position 为 top-left，使得太阳重新变回焦点。

还有一件事值得一提， object-position属性可以做成动画效果，如果使用得当也能产生让人眼前一亮的效果。下面是一段例子：

img {  /* other CSS here... */  object-fit: cover;  object-position: 0% 0%;  animation: ltr 5s alternateinfinite;}   @keyframes ltr {  0% {    object-position: 0% 0%;  }  25% {    object-position: 20% 0%;  }  100% {    object-position: 100% 100%;  }} 

在这段代码中，我把图像的位置作为关键帧动画，正如你所看，最后的效果看起来也不错。

See the Pen Animating the object-position Propertyby SitePoint ( @SitePoint) on CodePen.

这也可以当成视频效果使用，想象从一个人移动到另一个人的情况。

浏览器支持和 Polyfills

虽然这些属性非常有用，但你能否使用它们还依赖于 浏览器的支持。 object-fit除了 IE/Edge 外被所有主流浏览器支持，而 object-position除了 IE/Edge 和 Safari 外被所有主流浏览器支持。

一般来说，你可能只需要 object-fit属性。如果你愿意牺牲一部分用户的体验你可以使用该属性。如果你需要支持古老的浏览器，你可以使用 Federico Brigante 开发的 polyfill。

结论

我希望你能够希望这个教程以及附带的例子。如果我遗漏了什么或者有你想要补充的，请通过留言让我知道。