Comment adapter un div à la taille de son image de fond ?

Réponses rédigées par Antoine

Dernière mise à jour : 2021-01-20 11:36:06

Question

Bonjour, j'ai plusieurs balises <div> qui ont des images de fond avec background-image:url();et background-repeat:no-repeat;.

Comment puis-je faire pour adapter automatiquement la taille des <div> à la taille des images de fond, sachant que je ne connais pas préalablement la taille de ces images ? Je ne peux donc pas utiliser width et height, merci.

Réponse

Je ne pense pas qu'il y ait une solution native en CSS pour adapter automatiquement une balise <div> à la taille de son image de fond. Il va falloir feinter quelque peu.

L'une des solutions est de positionner la même image que celle de fond, dans le conteneur, puis ne pas l'afficher, via la propriété CSS visibility.

Attention cependant : cette méthode permet d'adapter la hauteur du conteneur mais pas sa longueur.

Dans l'exemple ci-dessous on crée deux CLASS CSS, conteneur qui s'applique au conteneur, la balise <div> ; puis image qui s'applique à l'image invisible.

La CLASS conteneur qui affiche l'image de fond via les propriété background-image et background-repeat avec la valeur no-repeat pour que l'image ne se répète pas et s'affiche qu'une seule fois.
La CLASS image permet de rendre l'image invisible, pour cela on utilise la propriété visibility avec la valeur hidden.

Exemple :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment adapter un div à la taille de son image de fond ?</title>
</head>  
<body>
<style>
.conteneur { 
background-image: url(https://www.collaborativejob.com/os.jpg); 
background-repeat: no-repeat; 
} 
.image { 
visibility: hidden; 
} 
</style>
<div class="conteneur"> 
<img src="https://www.collaborativejob.com/os.jpg" class="image" alt=""> 
</div> 
</body>
</html>