Comment faire en sorte que div height s’adapte automatiquement à la taille de l’arrière-plan?
Comment faire en sorte qu'une div s'adapte automatiquement à la taille de l'arrière-plan que je lui ai défini sans définir une hauteur spécifique (ou une hauteur minimale)?
Une autre solution, peut-être inefficace, consisterait à inclure l'image sous un élément img défini sur visibility: hidden;. Ensuite, associez le background-image de la div environnante à l’image.
Cela va définir la div environnante à la taille de l'image dans l'élément img mais l'afficher en tant qu'arrière-plan.
<div style="background-image: url(http://your-image.jpg);">
<img src="http://your-image.jpg" style="visibility: hidden;" />
</div>
Il existe un moyen très agréable et sympa de faire en sorte qu'une image d'arrière-plan fonctionne comme un élément img afin qu'elle ajuste sa height automatiquement. Vous devez connaître les ratios image width et height. Définissez la height du conteneur sur 0 et définissez le padding-top sous forme de pourcentage basé sur le rapport de l'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 de recevoir une image d’arrière-plan à 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 pirater en mesurant l'image de fond sur le serveur, puis en appliquant ces attributs à la div, comme d'autres l'ont mentionné.
Vous pouvez également pirater du code javascript pour redimensionner la div en fonction de la taille de l'image (une fois l'image téléchargée) - il s'agit en gros de la même chose.
Si vous avez besoin que votre div s'adapte automatiquement à l'image, je pourrais vous demander pourquoi vous ne mettez pas simplement une balise <img> dans votre div?
Cette réponse est semblable aux autres, mais est globalement la meilleure pour la plupart des applications. Vous devez connaître la taille de l'image à l'avance, ce que vous faites habituellement. Cela vous permettra d'ajouter du texte de surimpression, des titres, etc. sans remplissage négatif ni positionnement absolu de l'image. Leur clé consiste à définir le pourcentage 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 je viens d'ajouter 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%;
}<div class="wrapper">
<div class="main">
This is where your overlay content goes, titles, text, buttons, etc.
</div>
</div>Peut-être que cela 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>
Je suis sûr que cela n'aura jamais été vu jusqu'ici. Mais si votre problème était le même que le mien, voici 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 texte dans un élément, mais peut également être utilisée pour insérer du contenu image.
.my-div:before {
content: url("image.png");
}
Cela fera redimensionner la hauteur de la div à la taille de pixel réelle de l’image. Pour redimensionner aussi la largeur, ajoutez:
.my-div {
display: inline-block;
}
J'ai eu ce problème et j'ai trouvé la réponse de Hasanavi, mais j'ai eu un petit bug lors de l'affichage de l'image d'arrière-plan sur un écran large. L'image d'arrière-plan ne s'est pas étendue sur toute la largeur de l'écran.
Voici donc ma solution - basée sur le code de Hasanavi mais en mieux ... et cela devrait fonctionner à la fois sur des écrans extra-larges et 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 propriété background-size: contain; ne s'adapte pas bien aux écrans extra larges, et la propriété background-size: cover; ne s'adapte pas bien aux écrans mobiles. J'ai donc utilisé cet attribut @media pour jouer avec les tailles d'écran et résoudre ce problème.
Vous pouvez le faire côté serveur: en mesurant l’image puis en définissant la taille du div, OR en chargeant l’image avec JS, lisez ses attributs, puis définissez la taille DIV.
Et voici une idée, placez la même image à l'intérieur du div en tant que balise IMG, mais donnez-lui de la visibilité: hidden + play with position relative + donnez cette div en arrière-plan.
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;
}<div class="fixed-centered-covers-entire-page"></div>S'il s'agit d'une seule image d'arrière-plan prédéterminée et que vous souhaitez que la div soit réactive sans altérer le rapport de format de l'image d'arrière-plan, vous pouvez d'abord calculer le rapport de format de l'image, puis créer un div qui conserve son rapport de format en procédant comme suit :
Supposons que vous souhaitiez un format d'image de 4/1 et que la largeur de la div soit 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 conteneur.
Tu peux faire quelque chose comme ça
<div style="background-image: url(http://your-image.jpg); position:relative;">
<img src="http://your-image.jpg" style="opacity: 0;" />
<div style="position: absolute;top: 0;width: 100%;height: 100%;">my content goes here</div>
</div>
Peut-être que cela peut aider, ce n'est pas exactement un fond, mais vous avez l'idée simple
<style>
div {
float: left;
position: relative;
}
div img {
position: relative;
}
div div {
position: absolute;
top:0;
left:0;
}
</style>
<div>
<img src="http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg" />
<div>Hello</div>
</div>
Si vous aviez ce problème avec le CMS Umbraco et dans ce scénario, vous pouvez ajouter l'image à la div en utilisant quelque chose comme ceci pour l'attribut 'style' de la div:
style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"
La meilleure solution à laquelle je puisse penser consiste à spécifier votre largeur et votre hauteur en pourcentage. Cela vous permettra de redimensionner votre écran en fonction de la taille de votre moniteur. son plus de mise en page réactive ..
Par exemple, vous avez
<br/>
<div> . //This you set the width percent to %100
<div> //This you set the width percent to any amount . if you put it by 50% , it will be half
</div>
</div>
C'est la meilleure option si vous souhaitez une mise en page réactive, je ne recommanderais pas float, dans certains cas, float est correct à utiliser. mais dans la plupart des cas, nous évitons d'utiliser float, car cela affectera un grand nombre de choses lorsque vous testez plusieurs navigateurs.
J'espère que cela t'aides :)
Je traite ce problème depuis 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 pourrez le passer avec votre propre sélecteur) et calculer 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!