Отзывчивые изображения - Дополнительное заполнение?

Question

Я программирую веб-сайт, используя тему Foundation для wordpress, которая настроена на отзывчивые проекты, и у меня есть проблема с изображениями.

Я получаю дополнительное нижнее дополнение, которое я просто не вижу на firebug. Это mockuo того, что у меня есть, и проблема возникает на jsFiddle, поэтому я предполагаю, что это не имеет никакого отношения к шаблону.

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

Я прочитал некоторые ответы на этот и некоторые сказали использовать отступы в процентах, которое я сделал и не решить эту проблему. Почему это происходит и как я могу это исправить?

Answer 1

Проблема связана по умолчанию вертикального выравнивания этого инлайн размещен элемент. Вы можете понять поведение глядя на эту MDN documentation странице:

так или изменить свойства отображения элемента, или лучше изменить vertical-align свойство (ИМХО это лучше, потому что вы не изменить дисплей)

Answer 2

Настройка отображения: блок стиля на изображение сортирует это для меня :)

например http://jsfiddle.net/dbCsY/

Answer 3

display:block должно быть вашим исправлением .. http://jsfiddle.net/dbCsY/1/