web-dev-qa-db-ja.com

background-size：coverとbackground-size：containの違い

視覚的には違いを理解できますが、どの状況でどちらを優先するべきですか？それらを使用するポイントはありますか、それともパーセンテージで置き換えることができますか？

現在、これらのプロパティを使用するときに試行錯誤のアプローチを超えることができないようです。

また、私はかなり曖昧な説明しか見つけることができず、特に W3C doc は非常に困惑させます。

値の意味は次のとおりです。

'含む'

固有のアスペクト比（存在する場合）を維持しながら、幅と高さの両方が背景の配置領域に収まるように、イメージを最大サイズにスケーリングします。

'カバー'

固有のアスペクト比（存在する場合）を維持しながら、幅と高さの両方が背景の配置領域を完全にカバーできるように、画像を最小サイズにスケーリングします。

私はおそらく少し太っていますが、誰でも私に相対的な例で簡単な英語の説明を与えることができますか？

this fiddle を使用してください。ありがとう。

[〜＃〜] css [〜＃〜]

body{
    width:500px;
    height:500px;
    background:url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
    background-size:contain;
    background-repeat:no-repeat;
}

注

受け入れられた答えは、私が現在最も簡潔で完全だと思うものです。皆、助けてくれてありがとう。

htmlcsscss3background
22
U r s u s

出力を制御する疑似コードを検討することを検討できます。画像のサイズに割り当てられる値は、背景画像の縦横比に対するコンテナの縦横比に直接依存します。

注：Aspect ratio = width / height

含む

if (aspect ratio of container > aspect ratio of image)
    image-height = container height
    image-width = aspect-ratio-preserved width

else
    image-width = container width
    image-height = aspect-ratio-preserved height

カバー

if (aspect ratio of container > aspect ratio of image)
    image-width = container width
    image-height = aspect-ratio-preserved height

else
    image-height = container height
    image-width = aspect-ratio-preserved width

関係がわかりますか？ coverとcontainの両方で、アスペクト比は保持されます。しかし、if-else条件は両方の場合で逆転します。

これにより、coverが白い部分を表示せずにページ全体をカバーするようになります。コンテナのアスペクト比が大きい場合、その幅がコンテナの幅と等しくなるように画像をスケーリングします。アスペクト比が小さくなると、高さが大きくなります。したがって、白い部分なしでページ全体をカバーします。

Q。パーセントで置き換えることはできますか？

いいえ、単にパーセンテージではありません。コンディショニングが必要です。

Q。どちらの状況を他の状況よりも優先すべきですか？

Webサイトを作成しているとき、固定された背景に白い部分は必要ありません。したがって、coverを使用します。

containは、繰り返し背景を使用している場合に使用できます（たとえば、縦横比が非常に高い縦横比のパターン画像がある場合、containと設定background-repeatからrepeat-y）。しかし、containのより適切な使用法は、固定された高さ/幅の要素です。

37
The Pragmatick

この質問は、読者がbackground-sizeのcontainおよびcoverの値がどのように機能するかを既に理解していることを前提としていますが、ここでは、プライマー：

  • background-size: containは、元の縦横比を維持しながら、背景画像全体が背景領域に収まるようにします。背景領域が画像より小さい場合、画像は背景領域に収まるように縮小されます。背景領域が画像よりも高いか広い場合、メイン画像で占められていない領域の部分は、画像の繰り返しで埋められるか、 letterboxes / background-repeatがno-repeatに設定されている場合の空白。

  • background-size: coverは、背景画像をできるだけ大きくして、背景領域全体を隙間なく埋めます。 coverと100% 100%の違いは、画像のアスペクト比が保持されるため、画像の不自然な伸縮が発生しないことです。

これら2つのキーワード値は、長さ、パーセンテージ、またはautoキーワードの任意の組み合わせを使用して表現できないことに注意してください。

それで、いつ他のものよりも一方を使用しますか？個人的には、coverにはcontainより実用的な用途があると思うので、最初にそれを取り上げます。1

背景サイズ：カバー

background-size: coverの一般的な使用例の1つは、写真などの背景画像の詳細が豊富なフルスクリーンレイアウトで、この画像を目立たせたい場合、メインコンテンツとは対照的に背景として。

ビューポートの縦横比、または画像またはビューポートが縦長か横長かに関係なく、ブラウザのビューポートまたは画面を完全に覆うことができるだけの画像が必要です。画像が背景領域全体を満たし、元の縦横比を維持している限り、この結果として画像の一部が切り取られてもかまいません。

以下は、コンテンツが半透明の白い背景に格納されているレイアウト の例です。この背景は、フルスクリーンの背景上に移動します 。プレビューペインの高さを大きくすると、画像が自動的に拡大され、プレビューエリア全体を覆うようになります。

html {
    height: 100%;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body {
    width: 80%;
    min-height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 5em auto;
    padding: 1em;
}

代わりにbackground-size: containを使用すると、画像全体がプレビューペインに収まるように背景画像が縮小されます。これにより、プレビューペインのアスペクト比に応じて画像の周囲に ugい白いレターボックスが残ります 。これにより、効果が損なわれます。

背景サイズ：含む

それでは、画像の周りにspacesい空白スペースを残す場合、なぜbackground-size: containを使用するのでしょうか？すぐに思い浮かぶユースケースの1つは、画像全体が背景領域に収まる限り、デザイナーが空白スペースを気にしない場合です。

それは不自然に聞こえるかもしれませんが、すべての画像がbadのように見えるとは限りません。背景画像としてロゴを使用しているとは思わないかもしれませんが、これは写真の代わりにロゴを使用する例が実際にこれを最もよく実証する場所です。

ロゴは、通常、空白または完全に透明な背景の上にある不規則な形です。これにより、canvasが残ります。これは、単色または別の背景で塗りつぶすことができます。 background-size: containを使用すると、画像の一部が切り取られることなく、画像全体が背景に収まるようになりますが、画像はキャンバス上で自宅のように見えます。

ただし、必ずしも不規則な形の画像に適用する必要はありません。長方形の画像にも適用できます。背景画像のトリミングを行わないことを要求する限り、空白は合理的なトレードオフと見なされるか、まったく重要ではありません。固定幅レイアウトを覚えていますか？ background-size: containは本質的にそれと考えてください。ただし、背景画像および縦向きと横向きの両方の場合：コンテンツが常に背景画像の境界に常に収まるようにすることができる場合、空白は問題になりません。完全に。

background-size: containは画像が繰り返されるように設定されているかどうかにかかわらず機能しますが、背景の繰り返しを含む適切なユースケースは考えられません。

1gradient を背景として使用している場合、containとcoverの両方が効果を持たないことに注意してください。どちらの場合も、100% 100%を指定したかのように、グラデーションはコンテナを覆うように広がります。

15
BoltClock

background-size:coverは、div全体を画像で覆います。これは、表示されている画像全体はそれほど重要ではないが、すべての画像のサイズに準拠したいメイン画像のサムネイル画像を表示するのに役立ちます。 （たとえば、ブログ投稿の抜粋）

background-size:containは、div内の画像全体を表示します。これは、画像の全体を表示したいが、コンテナのdivサイズが設定されている場合に便利です。 （たとえば、会社のロゴのコレクション）

どちらも画像を同じアスペクト比に保ちます

http://cdn.onextrapixel.com/wp-content/uploads/2012/02/cover-contain.jpg

5
Lee
_background-size:contain;
_

containを使用する場合、要素内に自身のサイズを設定し、それを含める方法のために、まだ空白が表示される場合があります。

_background-size:cover;
_

上記の要素を完全にカバーします。ホワイトスペースは表示されません

ソース：

http://www.css3.info/preview/background-size/

例Hを参照

編集：_background-size:contain_を使用する場合：画像が常にビューポートに表示されるようにしたい場合。画像全体を見ることができますが、ブラウザとウィンドウのアスペクト比が同じでない場合は、画像の上部または下部に白いスペースが残ります。

_background-size:cover_を使用する場合：背景画像が必要であるが、含まれるホワイトスペースのマイナス効果が望ましくない場合は、注意してください：_background-size:cover;_を使用すると、画像の一部を切り取ります。

ソース： http://alistapart.com/article/supersize-that-background-please

2
Gerwin

私たちは、この考えを共有したいだけでなく、カバーについても大きな会話をしました。

  1. ランドスケープ画面のランドスケープ画像-使用に最適cover

  2. 横画面のポートレート画像-最適な使用方法contain

  3. 横画面のポートレート画像-最適な使用方法contain

  4. 横画面のポートレート画像-最適な使用方法contain

図：

if(iDonPutSomeCode) const result = iCantPasteLinkToCodePen

https://codepen.io/Kinosura/pen/EGZbdy?editors=11

0
Gleb Dolzikov

含む：-画像の幅と高さの両方がコンテンツ領域に収まるように、画像を最大サイズに拡大縮小します。例：カバー：-背景領域が背景画像で完全に覆われるように、背景画像を可能な限り大きくします。背景画像の一部は、背景の配置領域内に表示されない場合があります。例：

0
Bhagirath sheela