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
Libérer: 2024-12-07 07:28:20
original
986 Les gens l'ont consulté

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;
Copier après la connexion

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;
Copier après la connexion

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;
}
Copier après la connexion
<div>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal