Pourquoi n'est-il pas l'image de fond, sans largeur et de la hauteur?

Voici un exemple de code

Je me demandais pourquoi le background-image ne s'affiche pas à moins que j'ai spécifiques de l'image, la largeur et la hauteur en pixels. J'ai essayé de spécifique que la largeur en pourcentage, mais il ne fonctionne pas. Le w3cschools.com a pu montrer que l'image d'arrière-plan, sans préciser la largeur et la hauteur, mais il ne fonctionne que dans le corps d'arrière-plan. Aucune explication ou une solution de contournement?

HTML

<div class="pic"></div>

CSS

.pic {
  background: url("http://i.imgur.com/HIt6f8r.png") no-repeat;
  display: block;
  position: relative;
  width: 244px;
  height: 230px;
  background-size: contain;
}

OriginalL'auteur Kristina Bressler | 2015-08-24

  1. 6

    Votre <div> élément n'ont pas de contenu, de sorte que le <div> hauteur est 0px.

    La largeur de la <div> est toujours de 100%.

    Si vous ajouter le contenu de la div, il aura une certaine hauteur et il va montrer une partie de l'image.

    <body> par défaut a la hauteur de la fenêtre, de sorte que vous pouvez voir l'image de fond d'écran.

    Merci pour l'explication! Mais ce que sur les solutions ou quelque chose comme ça. J'ai même utilisé .pic:après à voir comment ça fonctionne, mais c'est bizarre.
    Essayez body, html, .pic{min-height: 100%;} ou quelque chose comme ça
    Vous pouvez également utiliser VH unités qui ont une assez bonne prise en charge du navigateur. 100% de la hauteur peut être délicat une fois que vous commencer à ajouter d'autres éléments de la page, à moins d'utiliser le positionnement absolu.
    Je pense que j'ai un peu trouvé la solution en ajoutant des <i></i> <div>. codepen.io/kikibres/stylo/doxvLE
    <body> par défaut est zéro en hauteur pas à la hauteur de la fenêtre. Afin de faire en sorte html, body {height: 100%} ou quelque chose comme ça peut être utilisée.

    OriginalL'auteur Justinas

  2. 6

    J'ai trouvé une excellente alternative sans spécifier la hauteur, grâce à http://blog.brianjohnsondesign.com/maintain-aspect-ratio-for-html-element-using-only-css-in-a-responsive-design/.
    HTML

    <div class="pic"></div>

    CSS

    .pic {
  background: url("http://i.imgur.com/HIt6f8r.png") no-repeat;
  display: block;
  position: relative;
  width: 20%;
  height: 0;
padding-bottom: 20%;
  background-size: 100%;
}

    Tout ce que vous devez faire, en supposant que c'est un carré, pour correspondre à la padding-bottom à la largeur en css.

    Mise à jour:
    J'ai aussi entendu parler d'une autre solution qui peut être utile. http://www.mademyday.de/css-height-equals-width-with-pure-css.html

    CSS

    .pic {
position: relative;
width: 50%; 
}
.pic:before {
content: "";
    display: block;
    padding-top: 100%;  
}

    bien que je ne l'ai pas testé encore....

    FONCTIONNE PARFAITEMENT. Juste ce que j'ai cherché pendant 2 jours...

    OriginalL'auteur Kristina Bressler

  3. 2
    <div class="pic"></div>

    Div est récipient, il s'attend à avoir des éléments internes, quand elle est vide, vous devez définir explicitement la hauteur.

    OriginalL'auteur Medet Tleukabiluly

  4. 1

    Si vous ne spécifiez pas de la hauteur, de la taille de votre div est donnée par la taille de son contenu, c'est à dire qu'il est 0x0, de sorte que vous n'avez pas beaucoup de chance de voir une image d'arrière-plan. Ajouter

    border: 1px solid red;

    pour voir comment grand votre div est (ou n'est pas).

    Cela a aidé. En outre, pour résoudre ce problème que je viens d'ajouter float: left; et l'image a montré, juste avec width: 100%;

    OriginalL'auteur Ulrich Schwarz