Imágenes receptivas: ¿acolchado adicional?

Question

Estoy programando un sitio web utilizando el tema de la base para WordPress que está configurado para diseños receptivos y tengo un problema con las imágenes.

Tengo un relleno de fondo adicional que simplemente no puedo ver en Firebug. Este es un simulacro de lo que tengo, y el problema aparece en jsfiddle, así que supongo que no tiene nada que ver con la plantilla.

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

Leí algunas respuestas sobre esto y algunos dijeron que usan el relleno como un porcentaje, lo que hice y no resolví el problema. ¿Por qué está sucediendo esto y cómo puedo solucionarlo?

Answer 1

El problema está relacionado con la alineación vertical predeterminada de este elemento colocado en línea. Puedes entender el comportamiento mirando esto Documentación de MDN página:

Entonces o cambia la propiedad de visualización del elemento, o es mejor que cambie el vertical-align propiedad (en mi humilde opinión, es mejor porque no cambia la pantalla)

Answer 2

Pantalla de configuración: el estilo de bloque en la imagen lo resuelve para mí :)

p.ej http://jsfiddle.net/dbcsy/

Answer 3

display:block debería ser tu solución .. http://jsfiddle.net/dbcsy/1/