Comment obtenir la hauteur du div pour s’ajuster automatiquement à la taille de l’arrière-plan?

Comment puis-je obtenir un div pour ajuster automatiquement à la taille de l’arrière-plan que je lui ai défini sans définir une hauteur spécifique (ou min-hauteur) pour cela?

Une autre solution, peut-être inefficace, consisterait à inclure l’image sous un ensemble d’éléments img dans visibility: hidden; . Faites ensuite l’ background-image d’ background-image du div environnant comme l’image.

Cela placera le div environnant à la taille de l’image dans l’élément img mais l’affichera en arrière-plan.

 

Il existe un moyen très sympa de faire fonctionner une image d’arrière-plan comme un élément img afin d’ajuster automatiquement sa height . Vous devez connaître le rapport width / height image. Définissez la height du conteneur sur 0 et définissez le padding-top en pourcentage sur la base du rapport d’image.

Cela ressemblera à ceci:

 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’avoir une image d’arrière-plan avec une hauteur automatique qui fonctionnera comme un élément img. Voici un prototype fonctionnel (vous pouvez redimensionner et vérifier la hauteur div): http://jsfiddle.net/TPEFn/2/

Il n’y a aucun moyen de régler automatiquement la taille de l’image d’arrière-plan à l’aide de CSS.

Vous pouvez le contourner en mesurant l’image d’arrière-plan sur le serveur, puis en appliquant ces atsortingbuts au div, comme d’autres l’ont mentionné.

Vous pouvez également pirater du javascript pour redimensionner le div en fonction de la taille de l’image (une fois l’image téléchargée) – c’est essentiellement la même chose.

Si vous avez besoin de votre div pour ajuster automatiquement l’image, je vous demanderais peut-être pourquoi vous ne mettez pas simplement une dans votre div?

Cette réponse est similaire à d’autres, mais est globalement la meilleure pour la plupart des applications. Vous devez connaître la taille de l’image avant la main que vous faites habituellement. Cela vous permettra d’append du texte, des titres, etc. sans superposition négative ni positionnement absolu de l’image. La clé consiste à définir le% de remplissage pour qu’il corresponde au format de l’image, comme indiqué dans l’exemple ci-dessous. J’ai utilisé cette réponse et essentiellement ajouté un fond d’image.

 .wrapper { width: 100%; /* whatever width you want */ display: inline-block; position: relative; background-size: contain; background: url('https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg') top center no-repeat; margin: 0 auto; } .wrapper:after { padding-top: 75%; /* this llama image is 800x600 so set the padding top % to match 600/800 = .75 */ display: block; content: ''; } .main { position: absolute; top: 0; bottom: 0; right: 0; left: 0; color: black; text-align: center; margin-top: 5%; } 
 
This is where your overlay content goes, titles, text, buttons, etc.

Peut-être que cela peut aider, ce n’est pas exactement un contexte, mais vous avez l’idée:

  
Hi there

Assez sûr que cela ne sera jamais vu jusqu’ici. Mais si votre problème était le même que le mien, c’était ma solution:

 .imaged-container{ background-image:url('< %= asset_path("landing-page.png") %> '); background-repeat: no-repeat; background-size: 100%; height: 65vw; } 

Je voulais avoir une div au centre de l’image, et cela me le permettra.

Il existe une solution CSS pure que les autres réponses ont manquée.

La propriété “content:” est principalement utilisée pour insérer du contenu textuel dans un élément, mais peut également être utilisé pour insérer du contenu d’image.

 .my-div:before { content: url("image.png"); } 

Cela entraînera le div à redimensionner sa taille à la taille de pixel réelle de l’image. Pour redimensionner la largeur aussi, ajoutez:

 .my-div { display: inline-block; } 

Vous pouvez le faire côté serveur: en mesurant l’image puis en définissant la taille du div, OU en chargeant l’image avec JS, lisez ses atsortingbuts, puis définissez la taille du DIV.

Et voici une idée, mettez la même image dans le div comme une balise IMG, mais donnez-lui la visibilité: caché + jouez avec la position relative + donnez cette image comme arrière-plan.

J’ai eu ce problème et trouvé la réponse de Hasanavi mais j’ai eu un petit bug en affichant l’image de fond sur un grand écran – L’image de fond ne s’est pas étendue à toute la largeur de l’écran.

Voici donc ma solution – basée sur le code de Hasanavi mais mieux… et cela devrait fonctionner aussi bien sur les écrans extra-larges que sur les écrans mobiles.

 /*WIDE SCREEN SUPPORT*/ @media screen and (min-width: 769px) { div { background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg'); background-size: cover; background-repeat: no-repeat; width: 100%; height: 0; padding-top: 66.64%; /* (img-height / img-width * container-width) */ /* (853 / 1280 * 100) */ } } /*MOBILE SUPPORT*/ @media screen and (max-width: 768px) { 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) */ } } 

Comme vous l’avez peut-être remarqué, la background-size: contain; les biens ne correspondent pas bien aux écrans extra larges, et la background-size: cover; l’ background-size: cover; propriété ne correspond pas bien sur les écrans mobiles, donc j’ai utilisé cet atsortingbut @media pour jouer avec les tailles d’écran et résoudre ce problème.

Que dis-tu de ça 🙂

 .fixed-centered-covers-entire-page{ margin:auto; background-image: url('https://i.imgur.com/Ljd0YBi.jpg'); background-repeat: no-repeat;background-size:cover; background-position: 50%; background-color: #fff; left:0; right:0; top:0; bottom:0; z-index:-1; position:fixed; } 
 

Peut-être que cela peut aider, ce n’est pas exactement un contexte, mais vous obtenez l’idée simple

   
Hello

Si c’est une image d’arrière-plan unique prédéterminée et que vous voulez que le div soit réactif sans déformer le rapport d’aspect de l’image d’arrière-plan, vous pouvez d’abord calculer le rapport hauteur / largeur de l’image et créer un div :

Disons que vous voulez un ratio d’aspect de 4/1 et que la largeur de la div est de 32%:

 div { width: 32%; padding-bottom: 8%; } 

Cela résulte du fait que le remplissage est calculé en fonction de la largeur de l’élément contenant.

A eu ce problème avec le CMS Umbraco et dans ce scénario, vous pouvez append l’image à la div en utilisant quelque chose comme ceci pour l’atsortingbut ‘style’ du div:

 style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px" 

J’ai eu affaire à ce problème pendant un moment et j’ai décidé d’écrire un plugin jquery pour résoudre ce problème. Ce plugin trouvera tous les éléments avec la classe “show-bg” (ou vous pouvez lui passer votre propre sélecteur) et calculera leurs dimensions d’image d’arrière-plan. tout ce que vous avez à faire est d’inclure ce code, marquez les éléments souhaités avec class = “show

Prendre plaisir!

https://bitbucket.org/tomeralmog/jquery.heightfrombg

La meilleure solution que je puisse imaginer est de spécifier votre largeur et votre hauteur en pourcentage. Cela vous permettra de modifier votre écran en fonction de la taille de votre moniteur. c’est plus de mise en page réactive ..

Pour une instance. tu as

 
. //This you set the width percent to %100
//This you set the width percent to any amount . if you put it by 50% , it will be half

C’est la meilleure option si vous voulez une mise en page réactive, je ne recommanderais pas le flottant, dans certains cas, le flottement est acceptable. mais dans la plupart des cas, nous évitons d’utiliser float car cela affectera un nombre important de choses lorsque vous effectuerez des tests entre navigateurs.

J’espère que cela t’aides 🙂

en fait, c’est assez facile quand on sait le faire:

 

L’astuce consiste simplement à définir le div entouré comme une div normale avec des valeurs dimensionnelles identiques aux valeurs dimensionnelles d’arrière-plan (dans cet exemple, 100% et 40vw).

Si vous pouvez faire une image sur Photoshop où le calque principal a une opacité de 1 ou plus et est fondamentalement transparent, placez cette image dans le div puis faites de l’image réelle l’image d’arrière-plan. Ensuite, réglez l’opacité de l’img sur 1 et ajoutez les dimensions souhaitées.

Cette image est faite de cette façon, et vous ne pouvez même pas faire glisser l’image invisible de la page, ce qui est cool.

J’ai résolu ce problème en utilisant jQuery. Jusqu’à ce que les nouvelles règles CSS autorisent ce type de comportement, je trouve que c’est le meilleur moyen de le faire.

Configurez vos divs

Ci-dessous vous avez votre div sur lequel vous voulez que l’arrière-plan apparaisse (“hero”) et ensuite le contenu / texte interne que vous voulez superposer sur votre image d’arrière-plan (“inner”). Vous pouvez (et devriez) déplacer les styles en ligne vers votre classe de héros. Je les ai laissés ici, il est donc facile et rapide de voir quels styles sont appliqués.

 
overlay content

Calculer le format de l’image

Calculez ensuite votre ratio d’image en divisant la hauteur de votre image par la largeur. Par exemple, si la hauteur de votre image est de 660 et que votre largeur est de 1280, votre format est de 0,5156.

Configurer un événement de redimensionnement de la fenêtre jQuery pour ajuster la hauteur

Enfin, ajoutez un écouteur d’événement jQuery pour le redimensionnement de la fenêtre, puis calculez la hauteur de votre div en fonction du rapport d’aspect et mettez-le à jour. Cette solution laisse généralement un pixel supplémentaire en bas en raison de calculs imparfaits en utilisant le format d’image. Nous ajoutons donc un -1 à la taille résultante.

 $(window).on("resize", function () { var aspect_ratio = .5156; /* or whatever yours is */ var new_hero_height = ($(window).width()*aspect_ratio) - 1; $(".hero").height(new_hero_height); } 

Assurez-vous qu’il fonctionne sur le chargement de la page

Vous devez exécuter l’appel de redimensionnement ci-dessus lorsque la page est chargée pour que les tailles d’image soient calculées au départ. Si vous ne le faites pas, le div des héros ne s’ajustera pas tant que vous n’aurez pas redimensionné la fenêtre. Je configure une fonction distincte pour effectuer les ajustements de redimensionnement. Voici le code complet que j’utilise.

 function updateHeroDiv() { var aspect_ratio = .5156; /* or whatever yours is */ var new_hero_height = ($(window).width()*aspect_ratio) - 1; $(".hero").height(new_hero_height); } $(document).ready(function() { // calls the function on page load updateHeroDiv(); // calls the function on window resize $(window).on("resize", function () { updateHeroDiv(); } }); 

ajoutez simplement à div

 style="overflow:hidden;"