Besoin de Vider Div Avec une Image de Fond À Force de Hauteur et Doivent Être adaptés

J'ai besoin de ce qui suit:

div vide sans contenu
image d'arrière-plan définie à la div de la
image d'arrière-plan pour être fluide/sensible sur la reconstitution de la taille je ne peux pas définir fixe
dimensions sur la div

Tout ce que j'ai essayer ne parvient pas à forcer le div ouvrir à l'appui de la taille de l'image d'arrière-plan. Toute aide est grandement appréciée...

http://www.everymountain.us/

<header id="header">
<div class="wrapper">
<div class="inner">
<div class="top_banner"></div>
</div>
<div class="clear"></div>
</div>
</header>

.front #header .top_banner { background: url('images/bg_front.jpg') no-repeat;   background-size: cover; }

Je serais prêt à voir vos efforts. Pls envoyer un JSfiddle lien de votre travail et une capture d'écran de la sortie que vous voulez.
ajout d'un lien vers le site et l'extrait de code ci-dessus.
Arrière-plan sera fonction de la taille de votre Div. Donc, si la taille de votre div n'est pas définie, alors le fond d'écran image d'affichage selon la taille de la div.
Je ne peux pas définir la taille de la DIV, car j'en ai besoin pour être réactif...des suggestions?
Vous pouvez voir la réponse de here dans ce cas, vous devez vérifier la hauteur et la largeur de l'image de la charge et la nécessité de définir la taille de la div.

OriginalL'auteur user1447958 | 2013-05-15

31

La façon de verrouiller une hauteur de ratio d'aspect c'est fluide largeur est d'utiliser padding-top ou padding-bottom pourcentage. C'est parce que tout le rembourrage, les pourcentages sont de l'élément conteneur largeur. Votre image d'arrière-plan est de 960 x 520, de sorte que la hauteur est 54.166666666667%.

html
```
<div class="top_banner"></div>
```
css
```
.top_banner {
    background-image: url('images/bg_front.jpg');
    background-size: 100%;
    width: 100%;
    padding-top: 54.166666666667%;
    height: 0;
}
```
Exemple: http://jsfiddle.net/SsTZe/156/

Essentiellement la même question: CSS image fluide de remplacement?

où obtenez-vous 54.166666666667% pour le rembourrage supérieur?
520/960
C'est une excellente technique qui contourne le problème d'avoir à indiquer de manière explicite la hauteur. Plus que de simplement dire merci, je voudrais également attirer l'attention de cette réponse.
Ce doit être la accepté de répondre. Grâce Contre Whipple

OriginalL'auteur Warren Whipple
1

Que vous pouvez manipuler après l'application d'CSS
```
 #DivName{
  background-size: auto auto;
     }
```
ici d'abord de l'auto est pour la largeur et la deuxième est pour la hauteur

auto ne fonctionne pas...div vide avec aucun hauteur de la div encore s'effondre.
vous c'est la partie de rendu de navigateur. pouvez-vous ajouter un espace "  " sur vous, div. Je pense que cela fonctionnera.
Laissez-moi savoir si vous obtenez le succès?

OriginalL'auteur Sandeep Kumar
0

Essayez d'utiliser medie de requêtes dans votre code CSS pour les différentes tailles d'écran pour gérer les différentes hauteurs fixes.
Par exemple:
```
@media (min-width: 1200px) { 
    div { height: 3em; } 
}
@media (min-width: 768px) and (max-width: 979px) { 
    div { height: 2em; } 
}
@media (max-width: 767px) { 
    div {  height: 1.2em; } 
}
@media (max-width: 480px) { 
    div {  height: 1em; } 
    }
```
etc. ce que vous devez personnaliser. Vous pouvez laisser la div de largeur de 100%, pour s'adapter à tous les écrans et le background-size:cover. Vous pouvez également faire autre taille de milieux (diff. les fichiers) pour chaque taille d'écran, à donner moins de la taille de votre site web pour mobile ou tablette.

je voulais dire "les médias" bien sûr, désolé pour le misstype

OriginalL'auteur danielnagy
0

Puisque c'est un haut de résultats sur google pour la création de fluide-hauteur divs en général (et pas seulement ceux qui sont vides comme la question précise), je voulais laisser un CSS Calc solution qui vous permet de mettre du contenu dans le div (le rembourrage truc qui le force à être vide):
```
.my-div {
     background: #ccc url(https://link-to-image/img.jpg) no-repeat 50% 0;
     background-size: 100% auto;
     width: calc(100vw - 350px);
     height: calc((100vw - 350px) * 0.468795); /* replace the decimal with your height /width aspect ratio */
}
```
ne calc fonctionnent sur tous les navigateurs maintenant, parce que j'ai été en évitant par manque de soutien?
Très bonne couverture sur calc ces jours, sauf pour opera mini: caniuse.com/#search=calc

OriginalL'auteur David Bodow

Vous devez vous connecter pour publier un commentaire.