Comment faire pour que div height s'ajuste automatiquement à la taille de l'arrière-plan?

il y a une façon très agréable et cool de faire fonctionner une image de fond comme un élément img pour qu'il ajuste automatiquement son height . Vous devez connaître l'image width et le rapport height . Réglez le height du conteneur à 0 et réglez le padding-top en pourcentage basé sur le rapport d'image.

Il ressemble à la suivante:

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 la hauteur automatique qui sera fonctionne 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 de fond en utilisant CSS.

vous pouvez le contourner en mesurant l'image de fond sur le serveur et en appliquant ensuite ces attributs au div, comme d'autres l'ont mentionné.

, Vous pouvez aussi pirater javascript pour redimensionner la div basé sur la taille de l'image (une fois que l'image a été téléchargée) - c'est fondamentalement la même chose.

si vous avez besoin de votre div image, je me demande pourquoi tu ne mets pas une étiquette <img> dans ta 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 avant main ce que vous faites habituellement. Cela vous permettra d'ajouter du texte, des titres, etc. sans rembourrage négatif ou positionnement absolu de l'image. La clé est de définir le pourcentage de remplissage pour correspondre au rapport d'aspect de l'image comme vu dans l'exemple ci-dessous. J'ai utilisé cette réponse et essentiellement juste 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%;
}

<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 arrière-plan, mais vous obtenez 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 ça n'a jamais été vu jusqu'ici. Mais si votre problème est 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 un div dans le centre de l'image, et cela me permettra de.

il y a une solution CSS pure que les autres réponses ont manquées.

la propriété "content:" est principalement utilisée pour insérer du contenu texte dans un élément, mais peut aussi être utilisée pour insérer du contenu image.

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

cela va amener le div à redimensionner sa hauteur à la taille réelle du pixel de l'image. Pour redimensionner la largeur aussi, ajouter:

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

vous pouvez le faire côté serveur: en mesurant l'image et en définissant ensuite la taille div, ou en chargeant l'image avec JS, lire ses attributs et ensuite définir la taille DIV.

et voici une idée, mettez la même image à l'intérieur du div qu'une étiquette IMG, mais donnez-lui de la visibilité: caché + jouer avec la position relative+ donner à cette div l'image en arrière-plan.

j'ai eu ce problème et j'ai 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.

donc voici ma solution-basée sur le code de Hasanavi mais 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 convient pas bien aux écrans mobiles, donc j'ai utilisé cet attribut @media pour jouer avec les tailles d'écran et corriger ce problème.

Comment à ce sujet :)

.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>

Demo: http://jsfiddle.net/josephmcasey/KhPaF/

S'il s'agit d'une simple image de fond prédéterminée et que vous voulez que le div soit réactif sans déformer le rapport d'aspect de l'image de fond, vous pouvez d'abord calculer le rapport d'aspect de l'image et ensuite créer un div qui préserve son rapport d'aspect en faisant ce qui suit:

dire que vous voulez un rapport d'aspect de 4/1 et la largeur de la div est de 32%:

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

cela résulte du fait que le rembourrage est calculé sur la base sur la largeur de l'élément conteneur.

peut être cela peut aider, ce n'est pas exactement un arrière-plan, mais vous obtenez 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>

avait ce problème avec le CMS Umbraco et dans ce scénario, vous pouvez ajouter l'image au div en utilisant quelque chose comme ceci pour l'attribut "style" du div:

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

Je m'occupe de ce problème depuis un moment et j'ai décidé d'écrire un plugin jquery pour résoudre ce problème. Ce plugin va trouver tous les éléments avec la classe "show-bg" (ou vous pouvez lui passer votre propre sélecteur) et calculer leurs dimensions d'image de fond. tout ce que vous avez à faire est d'inclure ce code, marque les éléments souhaités class="afficher

Profitez-en!

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 reziser votre écran en fonction de la taille de votre moniteur. son plus de la disposition 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 un layout responsive, Je ne recommande pas float , dans certains cas float est acceptable à utiliser. mais dans la plupart des cas , nous évitons d'utiliser float car il affectera une assez grande nombre de choses lorsque vous faites des tests de navigation croisée.

Espérons que cela aide :)

en fait c'est assez facile quand vous savez 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>

le truc est juste de définir le div fermé comme un div normal avec des valeurs dimensionnelles identiques aux valeurs dimensionnelles de fond (dans cet exemple, 100% et 40vw).

si vous pouvez faire une image sur Photoshop où le calque principal a une opacité d'environ 1 et est fondamentalement transparent, mettez cet img dans le div et faites ensuite l'image réelle l'image de fond. Ensuite, réglez l'opacité de l'img à 1 et ajoutez les dimensions de taille que vous voulez.

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

j'ai résolu ça en utilisant jQuery. Jusqu'à ce que les nouvelles règles CSS permettent ce type de comportement nativement je trouve que c'est la meilleure façon de le faire.

le programme d'Installation de votre divs

ci-Dessous, vous avez votre div que vous voulez l'arrière-plan apparaissent sur (le"héros") et ensuite, le contenu intérieur/texte que vous souhaitez superposer votre image d'arrière-plan ("interne"). Vous pouvez (et devriez) déplacer les styles en ligne pour votre classe de héros. J'ai laissé ici, donc c'est facile et rapide pour voir ce que les 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>

calculez le rapport d'image

calculez ensuite votre rapport d'aspect pour votre image en divisant la hauteur de votre image par la largeur. Par exemple, si votre hauteur d'image est de 660 et votre largeur de 1280, votre rapport d'aspect est de 0,5156.

Installation de jQuery fenêtre de l'événement de redimensionnement pour ajuster la hauteur

enfin, ajoutez un écouteur d'événements jQuery pour redimensionner la fenêtre, puis calculez la hauteur de votre div héros basé sur le rapport d'aspect et mettez-le à jour. Cette solution laisse typiquement un pixel supplémentaire en bas dû à des calculs imparfaits en utilisant le rapport d'aspect donc nous ajoutons 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 la page charge

vous devez effectuer l'appel de redimensionnement ci-dessus lorsque la page charge pour avoir les tailles d'image calculé au départ. Si vous ne le faites pas, alors la Div de héros ne s'ajustera pas jusqu'à ce que vous redimensionnez la fenêtre. J'ai mis en place une fonction séparée pour faire les réglages 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();        
    }
});

il suffit d'ajouter à div

style="overflow:hidden;"