Comment faire en sorte que la hauteur d'un div s'adapte automatiquement à la taille de l'arrière-plan ?

Question

Comment faire en sorte qu'une division s'adapte automatiquement à la taille de l'arrière-plan que je lui ai défini sans lui imposer une hauteur spécifique (ou une hauteur minimale) ?

Answer 1

Il existe un moyen très agréable et très cool de faire fonctionner une image d'arrière-plan comme une carte de crédit. img pour qu'il ajuste son height automatiquement. Vous devez connaître l'image width y height ratio. Réglez le height du conteneur à 0 et définissez le padding-top en pourcentage, en fonction du ratio de l'image.

Il ressemblera à ce qui suit :

div {
    background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
}

Vous venez d'obtenir une image de fond avec une hauteur automatique qui fonctionnera comme un élément img. Voici un prototype fonctionnel (vous pouvez redimensionner et vérifier la hauteur de la div) : http://jsfiddle.net/8m9ur5qj/

Answer 2

Une autre solution, peut-être inefficace, consisterait à inclure l'image sous une rubrique img défini comme visibility: hidden; . Ensuite, faites le background-image de la div environnante identique à celle de l'image.

La division qui l'entoure aura la même taille que l'image contenue dans le champ img mais l'affiche comme arrière-plan.

<div style="background-image: url(http://your-image.jpg);">
 <img src="http://your-image.jpg" style="visibility: hidden;" />
</div>

Answer 3

Il n'existe aucun moyen d'ajuster automatiquement la taille de l'image d'arrière-plan à l'aide de CSS.

Vous pouvez contourner ce problème en mesurant l'image d'arrière-plan sur le serveur, puis en appliquant ces attributs à la division, comme d'autres l'ont mentionné.

Vous pouvez également modifier le javascript pour redimensionner la division en fonction de la taille de l'image (une fois que l'image a été téléchargée), ce qui revient au même.

Si vous avez besoin que votre div s'adapte automatiquement à l'image, je vous demande pourquoi vous ne mettez pas simplement une balise <img> à l'intérieur de votre div ?

Answer 4

Peut-être que ceci peut aider, ce n'est pas exactement un fond, mais vous avez l'idée :

<style>
div {
    float: left;
    position: relative;
}
div img {
    position: relative;
}

div div {
    position: absolute;
    top:0;
    left:0;
}
</style>

<div>
    <img src="http://antwrp.gsfc.nasa.gov/apod/image/0903/omegacen_davis.jpg" />
    <div>Hi there</div>
</div>

Answer 5

Vous pouvez le faire côté serveur : en mesurant l'image et en définissant ensuite la taille de la division, OU en chargeant l'image avec JS, en lisant ses attributs et en définissant ensuite la taille de la division.

Et voici une idée, mettez la même image à l'intérieur de la div comme une balise IMG, mais donnez-lui une visibilité : hidden + jouez avec la position relative + donnez à cette div l'image comme fond.