Maison >interface Web >tutoriel CSS >Comment puis-je adapter une image d'arrière-plan à un div sans recadrage ?

Comment puis-je adapter une image d'arrière-plan à un div sans recadrage ?

Barbara Streisand
Barbara Streisandoriginal
2024-12-23 01:52:32652parcourir

How Can I Make a Background Image Fit a Div Without Cropping?

Ajuster l'image d'arrière-plan au Div

Problème :
Une image d'arrière-plan est coupée dans un div. Le résultat souhaité est d'afficher l'intégralité de l'image sans recadrage.

Solution :

Pour conserver l'intégrité de l'image d'arrière-plan dans le div, utilisez la propriété background-size. Cette propriété dicte la façon dont l'image est mise à l'échelle par rapport à son conteneur.

En employant les valeurs suivantes, vous pouvez obtenir le résultat souhaité :

  • Contenir : Met à l'échelle le l'image pour s'adapter à la div, en conservant son rapport hauteur/largeur.
  • Couverture : Redimensionne l'image pour couvrir la div entier, recadrant potentiellement des parties de l'image.

Code Exemples :

Contient :

background-size: contain;

Couverture :

background-size: cover;

Remarque : La propriété background-size est prise en charge par la plupart des navigateurs modernes.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn