images réactives - rembourrage supplémentaire?

StackOverflow https://stackoverflow.com/questions/9359121

  •  28-10-2019
  •  | 
  •  

Question

Je suis la programmation d'un site Web en utilisant le thème Fondation pour WordPress qui est configuré pour les conceptions sensibles et j'ai un problème avec les images.

je reçois un rembourrage supplémentaire en bas que je ne peux pas voir sur Firebug. Ceci est un mockuo de ce que j'ai, et le problème apparaît sur jsFiddle donc je devine qu'elle n'a rien à voir avec le modèle. 

<div class="container">
    <img src="http://www.lamasia.es/web/new/wp-content/uploads/imagen3.png" alt=""/>
</div>

img{
  height:auto;
  max-width:100%
}

.container{
  background-color:#ccc;
  padding:2%;
  width:40%;
}

http://jsfiddle.net/dbCsY/

J'ai lu quelques réponses à ce sujet et certains ont dit Rembourrage utilisation en pourcentage, que je l'ai fait et n'a pas résolu le problème. Pourquoi est-ce qui se passe et comment puis-je résoudre ce problème?

Était-ce utile?

La solution

Le problème est lié à la valeur par défaut d'alignement vertical de l'élément placé en ligne. Vous pouvez comprendre le comportement regardant cette documentation page MDN:

ou vous modifiez la propriété d'affichage de l'élément, ou mieux vous modifiez la propriété vertical-align (à mon humble avis, il vaut mieux parce que vous ne changez pas l'affichage)

Autres conseils

Réglage de l'affichage: style bloc sur l'image trie pour moi:)

http://jsfiddle.net/dbCsY/

display:block devrait être votre solution .. http://jsfiddle.net/dbCsY/1/

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top