Comment faire en sorte que div height s’adapte automatiquement à la taille de l’arrière-plan?
https://stackoverflow.com/questions/600743
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
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)?
La solution
Une autre solution, peut-être inefficace, consisterait à inclure l'image sous un élément img défini sur visibility: hidden;. Faites ensuite la background-image de la div environnante identique à celle de l’image.
Ceci va définir la div environnante à la taille de l'image dans l'élément <=> 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>
Autres conseils
Il existe un moyen très sympa de faire fonctionner une image d’arrière-plan comme un élément img afin qu’elle ajuste sa height automatiquement. Vous devez connaître le rapport image width et padding-top. Définissez le <=> du conteneur sur 0 et définissez le <=> sous forme de pourcentage basé sur le taux d'image.
Cela 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 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 de la division): 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 d'arrière-plan 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 <img> balise dans votre div?
Cette réponse est similaire 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 en surimpression, des titres, etc. sans remplissage négatif ni positionnement absolu de l'image. Leur clé est de régler 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 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, ce qui me le permettra.
Il existe une solution CSS pure que les autres réponses ont manquée.
Le " contenu: " Cette propriété 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");
}
Ceci fera redimensionner la hauteur de la div à la taille réelle de l’image en pixels. Pour redimensionner également la largeur, 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 attributs, puis définissez la taille du 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 avec position relative + donnez ce div en arrière-plan.
J'ai eu ce problème et j'ai trouvé la réponse de Hasanavi, mais un petit bug m'a été signalé 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 les é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 l'écran. tailles et résoudre ce problème.
Que diriez-vous de ceci:)
.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>
Démonstration: http://jsfiddle.net/josephmcasey/KhPaF/fr <
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 le rapport de format procédez 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.
Peut-être que cela peut aider, ce n'est pas exactement un fond, mais vous avez une 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>
Vous pouvez 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>
Vous avez eu 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"
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 pouvez passer 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
Profitez!
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.
Pour une instance. 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, mais dans certains cas, float est acceptable. mais dans la plupart des cas, nous évitons d'utiliser float, car cela affectera un grand nombre de choses lorsque vous effectuez des tests entre navigateurs.
J'espère que cela vous aidera:)
en fait, il est très facile de savoir comment le faire:
<section data-speed='.618' data-type='background' style='background: url(someUrl)
top center no-repeat fixed; width: 100%; height: 40vw;'>
<div style='width: 100%; height: 40vw;'>
</div>
</section>
L'astuce consiste simplement à définir le div joint comme un div normal avec des valeurs dimensionnelles identiques à celles du fond (dans cet exemple, 100% et 40vw).
J'ai résolu ceci en utilisant jQuery. Jusqu'à ce que les nouvelles règles CSS autorisent ce type de comportement de manière native, je pense que c'est la meilleure façon de le faire.
Configurez vos divs
Ci-dessous, vous avez votre div sur laquelle vous souhaitez que l'arrière-plan apparaisse (& "; héros &";), puis le contenu / texte intérieur que vous souhaitez superposer au-dessus de votre image d'arrière-plan (& "intérieur &"; 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.
<div class="hero" style="background-image: url('your-image.png'); background-size: 100%; background-repeat: no-repeat; width: 100%;">
<div class="inner">overlay content</div>
</div>
Calculer le format de l'image
Ensuite, calculez le format de votre image en divisant la hauteur de votre image par la largeur. Par exemple, si votre image a une hauteur de 660 et une largeur de 1280, le format de votre image est de 0,5156.
Configurez 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 la div de votre héros à partir du rapport de format et mettez-le à jour. Cette solution laisse généralement un pixel supplémentaire au bas en raison de calculs imparfaits utilisant le format d'image. Nous ajoutons donc -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 que cela fonctionne lors du chargement de la page
Vous devez effectuer l'appel de redimensionnement ci-dessus lors du chargement de la page pour que les tailles d'image soient calculées au départ. Si vous ne le faites pas, la division héros ne s'ajustera pas jusqu'à ce que vous redimensionniez 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();
}
});
Si vous pouvez créer une image sur Photoshop dans laquelle le calque principal a une opacité de 1 ou plus et est fondamentalement transparent, placez-le dans le div, puis transformez l'image réelle en image d'arrière-plan. ALORS, définissez l'opacité de l'img sur 1 et ajoutez les dimensions que vous souhaitez.
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.
ajoutez simplement à div
style="overflow:hidden;"
