Comment puis-je adapter une image d'arrière-plan CSS à la largeur et ajuster automatiquement la hauteur de manière proportionnelle ?

Image d'arrière-plan CSS pour s'adapter à la largeur, hauteur pour s'adapter automatiquement aux proportions

Problème

En CSS, définition d'une image d'arrière-plan avec sa largeur égale La largeur et la hauteur de la page définies pour conserver les proportions de l'image peuvent poser des problèmes, en particulier en ce qui concerne le recadrage vertical et l'image. placement.

Solution : background-size : cover

CSS3 propose la propriété background-size, qui permet de contrôler la taille de l'image. En définissant background-size: cover, vous pouvez redimensionner l'image à la plus petite taille qui couvre entièrement la zone de positionnement de l'arrière-plan tout en conservant les proportions.

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

Ce paramètre garantit que l'image d'arrière-plan couvre la largeur de la page. , et sa hauteur est mise à l'échelle en conséquence, ce qui entraîne la réactivité et le comportement de recadrage souhaités.

Comparaison de contain et cover

La propriété background-size propose deux valeurs supplémentaires, contain et cover, qui offrent un comportement de mise à l'échelle différent :

• contain : garantit que l'image s'adapte à la zone de positionnement d'arrière-plan sans recadrage, ce qui entraîne un espace vide visible autour de l'image. image.
• couverture : garantit que l'image couvre toute la zone de positionnement de l'arrière-plan, ce qui entraîne un éventuel recadrage de l'image pour fit.

Comparaison visuelle

Considérez l'image ci-dessous affichée dans un cadre de délimitation. contain garantit que l'image est entièrement visible dans la boîte, tandis que la couverture remplit la boîte avec l'image, ce qui entraîne un recadrage en bas :

[Image de l'image avec les paramètres de taille d'arrière-plan de contenu et de couverture]

Démonstration en direct

Le code suivant montre la différence entre contenir et couvrir :

<div><div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully contained.</p>
</div>
<div><div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image covers all of the <code><div></code>.</p>
</div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!