Maison >interface Web >tutoriel CSS >Comment rendre une image d'arrière-plan entièrement visible dans une division ?

Comment rendre une image d'arrière-plan entièrement visible dans une division ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-07 07:28:20979parcourir

How to Make a Background Image Fully Visible Within a Div?

Ajuster une image d'arrière-plan à un div

Si une image d'arrière-plan est partiellement masquée dans un div, il existe plusieurs méthodes pour garantir qu'elle est entièrement affiché. L'utilisation de la propriété background-size offre deux options :

Mise à l'échelle de l'image d'arrière-plan

Pour garantir que l'image d'arrière-plan est mise à l'échelle pour s'adapter au div, utilisez :

background-size: contain;

Couvrir toute la division avec l'arrière-plan Image

Alternativement, pour redimensionner l'image d'arrière-plan afin de couvrir l'intégralité du div, utilisez :

background-size: cover;

Exemple :

#imagecontainer {
  background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
  width: 100px;
  height: 200px;
  border: 1px solid;
  background-size: contain;
}
<div>

Cette technique garantit que l'image d'arrière-plan s'affiche correctement dans le div spécifié.

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