Définir une image d'arrière-plan divs pour s'adapter à sa taille?
J'ai un <div> avec une image d'arrière-plan.
La taille de <div> peut changer avec le temps.
Est-il possible de régler l'image d'arrière-plan de Divs pour qu'elle corresponde à la taille de <div>?
Disons que j'ai un div qui est 400x400 et une image qui est 1000x1000, est-il possible de réduire l'image à 400x400 et donc correspondre à la taille <div>?
Si vous souhaitez utiliser CSS3, vous pouvez le faire simplement en utilisant background-size, comme suit:
background-size: 100%;
Il est supporté par tous les principaux navigateurs (y compris IE9 +). Si vous souhaitez le faire fonctionner dans IE8 et avant, consultez les réponses à cette question .
Utilisez background-size à cette fin:
background-size: 100% 100%;
Plus sur:
Utilisez background-size property pour y parvenir. Vous devez choisir entre cover, contain et 100% - en fonction de ce que vous souhaitez obtenir exactement.
Vous pouvez y parvenir avec la propriété background-size, désormais prise en charge par la plupart des navigateurs.
Pour redimensionner l’image d’arrière-plan à l’intérieur du div:
background-size: contain;
Pour redimensionner l'image d'arrière-plan afin de couvrir l'ensemble de la div:
background-size: cover;
Utilisez ceci car il peut également agir en tant que réactif. :
background-size: cover;
Vous pouvez utiliser la propriété background-size CSS3 pour cela.
.header .logo {
background-size: 100%;
}
Réglez votre css à ceci
img {
max-width:100%,
max-height100%
}
Voulait ajouter une solution pour IE8 et ses versions antérieures (aussi bas que IE5.5 je pense), qui ne peut pas utiliser background-size
div{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
'/path/to/img.jpg', sizingMethod='scale');
}