Immagini reattive - imbottitura extra?

Question

Sto programmando un sito Web utilizzando il tema della fondazione per WordPress che è configurato per progetti reattivi e ho un problema con le immagini.

Ricevo un'imbottitura in più che semplicemente non riesco a vedere su Firebug. Questo è un mockuo di ciò che ho e il problema si presenta su JSFiddle, quindi immagino che non abbia nulla a che fare con il modello.

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

Ho letto alcune risposte su questo e alcuni hanno detto che usano l'imbottitura in percentuale, cosa che ho fatto e non ho risolto il problema. Perché sta succedendo e come posso risolverlo?

Answer 1

Il problema è correlato all'allineamento verticale predefinito di questo elemento inserito in linea. Puoi capire il comportamento che guarda questo Documentazione MDN pagina:

Quindi o modifichi la proprietà del display dell'elemento, oppure modifichi meglio il vertical-align Proprietà (IMHO è meglio perché non si cambia il display)

Answer 2

Display di impostazione: Blocca stile sull'immagine lo ordina per me :)

per esempio http://jsfiddle.net/dbcsy/

Answer 3

display:block dovrebbe essere la tua soluzione .. http://jsfiddle.net/dbcsy/1/