web-dev-qa-db-fra.com

Différence entre taille du fond: couverture et taille du fond: contient

Sur le plan visuel, je peux comprendre la différence, mais dans quelles situations devrais-je préférer l'une plutôt que l'autre?

Actuellement, il semble que je ne puisse pas aller au-delà d’une approche d’essai erroné lors de l’utilisation de ces propriétés, ce qui me tient à l’esprit.

De plus, je ne trouve que des explications assez vagues et surtout le document W3C assez déconcertant.

Les valeurs ont les significations suivantes:

'contenir'

Redimensionnez l'image tout en préservant son format intrinsèque (le cas échéant), à la plus grande taille telle que sa largeur et sa hauteur peut tenir dans la zone de positionnement de l’arrière-plan.

'couverture'

Mettez l'image à l'échelle, tout en préservant son rapport d'aspect intrinsèque (le cas échéant), au format plus petite taille telle que sa largeur et sa hauteur puissent complètement couvrir la zone de positionnement de fond.

Je suis probablement un peu lourd, mais est-ce que quelqu'un peut me donner une explication simple en anglais avec des exemples relatifs?

S'il vous plaît utiliser ce violon . Merci.

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;
}

Remarque 

La réponse acceptée est celle que je trouve actuellement la plus concise et la plus complète ... Merci à tous pour leur aide.

htmlcsscss3background
19
U r s u s

Vous pouvez envisager de regarder les pseudocodes qui régissent la sortie. Les valeurs attribuées à la taille de l'image dépendent directement des formats d'image du format d'image par rapport au conteneur de l'image d'arrière-plan.

Remarque:Aspect ratio = width / height

Contient 

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

Couverture 

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

Tu vois la relation? cover et contain, les proportions sont conservées. Mais les conditions si - sinon inversent dans les deux cas.

C’est ce qui fait que cover couvre toute la page, sans aucune partie blanche visible. Lorsque le rapport hauteur/largeur du conteneur est supérieur, redimensionnez l'image de sorte que sa largeur devienne égale à la largeur du conteneur. Maintenant, la hauteur sera plus grande, car le rapport d'aspect est plus petit. Ainsi, il couvre toute la page sans aucune partie blanche.

Q. Peuvent-ils être remplacés par des pourcentages?

Non, pas simplement en pourcentage. Vous aurez besoin de conditionnement.

Q. Dans quelles situations devrais-je préférer l'une plutôt que l'autre?

Lorsque vous créez un site Web, vous ne voudriez pas que des parties blanches apparaissent à l'arrière-plan fixe. Alors utilisez cover.

containpeut être utilisé lorsque vous utilisez un arrière-plan répété (par exemple, lorsque vous avez une image de motif avec un rapport hauteur/largeur très élevé avec conteneur/visionneuse, vous pouvez utiliser contain et définir background-repeat sur repeat-y). Mais une utilisation plus appropriée de contain serait pour un élément hauteur/largeur fixe.

35
The Pragmatick

Bien que la question suppose que le lecteur comprenne déjà comment les valeurs contain et cover pour background-size fonctionnent, voici une paraphrasme en anglais clair de ce que la spécification dit, qui peut servir de guide rapide:

  • background-size: contain veille à ce que l'image d'arrière-plan complète corresponde à la zone d'arrière-plan, tout en conservant son rapport de format d'origine. Si la zone d'arrière-plan est plus petite que l'image, celle-ci sera réduite afin de s'adapter à la zone d'arrière-plan. Si la zone d'arrière-plan est plus grande ou plus large que l'image, les parties de la zone non occupées par l'image principale seront remplies par des répétitions de l'image ou par letterboxesespaces si background-repeat est défini sur no-repeat.

  • background-size: cover rend l'image d'arrière-plan la plus grande possible, de sorte qu'elle remplisse toute la zone d'arrière-plan sans laisser de vide. La différence entre cover et 100% 100% réside dans le fait que le rapport de format de l'image est préservé. Par conséquent, aucun étirement non naturel de l'image ne se produit.

Notez qu'aucune de ces deux valeurs de mot-clé ne peut être exprimée à l'aide d'une combinaison de mots-clés de longueur, de pourcentage ou auto.

Alors, quand utilisez-vous l'un sur l'autre? Personnellement, je pense que cover a des utilisations plus pratiques que contain, je vais donc commencer par cela.1

taille du fond: couverture

Un cas d'utilisation courant de background-size: cover est une disposition en plein écran où l'image d'arrière-plan est riche en détails, telle qu'une photo, et vous souhaitez présenter cette image _/bien en évidence, bien que comme arrière-plan par opposition au contenu principal .

Vous voulez juste assez d’image pour pouvoir couvrir complètement la fenêtre ou l’affichage du navigateur, quel que soit le rapport hauteur/largeur de la fenêtre, que l’image ou la fenêtre soit en mode portrait ou paysage. Vous n'êtes pas inquiet si des parties de l'image sont rognées à la suite de cette opération, tant que l'image remplit toute la zone d'arrière-plan et conserve son rapport de format d'origine.

Voici un exemple de une mise en page dans laquelle le contenu est hébergé sur un arrière-plan blanc semi-transparent survolant un arrière-plan plein écran }. Lorsque vous augmentez la hauteur du volet d'aperçu, notez que l'image est automatiquement mise à l'échelle pour s'assurer qu'elle couvre toujours toute la zone d'aperçu.

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;
}

Si vous utilisez plutôt background-size: contain, il se produit que l'image d'arrière-plan se réduit afin que toute l'image puisse tenir dans le volet d'aperçu. Cela laisse (des boîtes aux lettres blanches laides autour de l'image en fonction du rapport de format du volet de prévisualisation) }, ce qui détruit l'effet.

taille du fond: contient

Alors, pourquoi utiliser background-size: contain s’il laisse de très vides espaces blancs autour de l’image? Un cas d’utilisation qui nous vient immédiatement à l’esprit est que le concepteur ne se soucie pas des espaces vides, tant que l’image entière tient dans la zone d’arrière-plan.

Cela peut sembler artificiel, mais considérez que toutes les images ne semblent pas mauvaises avec un espace vide autour. C’est là que l’exemple de l’utilisation d’un logo au lieu d’une photo le montre bien, même si vous ne vous retrouverez probablement pas en utilisant un logo comme image de fond.

Un logo est généralement une forme irrégulière reposant sur un arrière-plan vierge ou complètement transparent. Cela laisse un canvas qui peut être rempli par une couleur unie ou un arrière-plan différent. En utilisant background-size: contain, vous vous assurez que l’image entière s’adapte à l’arrière-plan sans aucune partie de celle-ci ne soit tronquée, mais l’image a toujours l’air bien à la maison.

Mais cela ne doit pas nécessairement s'appliquer à une image de forme irrégulière. Cela peut aussi s'appliquer aux images rectangulaires. Tant que vous exigez qu'aucun recadrage de l'image d'arrière-plan ne se produise, les espaces peuvent soit être considérés comme un compromis raisonnable, soit pas un gros problème du tout. Rappelez-vous les dispositions à largeur fixe? Pensez à background-size: contain comme essentiellement cela, mais pour les images d’arrière-plan et dans les orientations portrait et paysage: si vous pouvez vous assurer que le contenu correspondra toujours aux limites de l’image d’arrière-plan à tout moment, les espaces ne seront plus un problème.

Bien que background-size: contain fonctionne, que l’image soit ou non configurée pour la répétition, je ne vois aucun bon cas d’utilisation impliquant la répétition d’arrière-plans.

1Notez que si vous utilisez un dégradé comme arrière-plan, contain et cover n'ont aucun effet, car les dégradés n'ont aucune dimension intrinsèque. Dans les deux cas, le dégradé s'étendra pour couvrir le conteneur, comme si vous aviez spécifié 100% 100%.

14
BoltClock

background-size:cover couvrira toute la div avec l'image. Cela peut être utile pour afficher des images miniatures d'une image principale lorsque toute l'image affichée n'est pas très importante, mais que vous souhaitez tout de même vous conformer à une taille pour toutes les images. (par exemple, un extrait de blog)

background-size:contain affichera l'image entière dans la div. Cela peut être utile si vous souhaitez spécifiquement afficher l'intégralité des images, mais dans une taille de div de conteneur définie. (Par exemple, une collection de logos de société)

Les deux gardent l'image au même rapport d'aspect

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

5
Lee
background-size:contain;

Lorsque vous utilisez contain, vous pouvez toujours voir un espacement des blancs, en raison de la façon dont il se taille et se contient dans l'élément.

background-size:cover;

couvrira complètement ledit élément, vous ne verrez aucun espacement blanc

la source:

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

voir exemple H

edit: utilisez background-size:contain si: Vous le voulez pour que votre image soit toujours affichée dans la fenêtre. Veuillez noter que: bien que vous puissiez voir l'image complète, elle laissera un espacement blanc en haut ou en bas de l'image lorsque les proportions du navigateur et de la fenêtre ne sont pas identiques.

utilisez background-size:cover si: Vous voulez une image d’arrière-plan, mais vous ne voulez pas l’effet négatif de l’espacement des blancs qui contient a, veuillez noter que: lorsque vous utilisez background-size:cover;, vous pouvez l'expérience que cela va couper une partie de l'image.

source: http://alistapart.com/article/supersize-that-background-please

2
Gerwin

Nous avons eu une énorme conversation à propos de la couverture et du contenu que je veux juste partager avec vous:

  1. image de paysage sur écran de paysage - il est préférable d’utiliser cover 

  2. image de portrait sur écran de paysage - il est préférable d’utiliser contenir 

  3. image de portrait sur écran de paysage - il est préférable d’utiliser contenir 

  4. image de portrait sur écran de paysage - il est préférable d’utiliser contenir 

Illustration:

if(iDonPutSomeCode) const result = iCantPasteLinkToCodePen

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

0
Gleb Dolzikov

Contient: - Redimensionne l'image à la taille maximale, de sorte que sa largeur et sa hauteur puissent s'inscrire dans la zone de contenu. La zone est complètement recouverte par l'image de fond. Certaines parties de l'image d'arrière-plan peuvent ne pas être visibles dans la zone de positionnement de l'arrière-plan . Exemple:

0
Bhagirath sheela