Адаптивные изображения - дополнительные прокладки?

Question

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

У меня есть дополнительная нижняя прокладка, которую я просто не могу увидеть в firebug. Это макет того, что у меня есть, и проблема обнаруживается на 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 page:

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

Answer 2

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

Answer 3

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

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