Высота DIV, основанная на высоте изображения ребенка, добавляет несколько дополнительных пикселей внизу

Почему у родительского div изображения есть несколько дополнительных пикселей внизу. Как удалить пиксели без жесткого кода родительской высоты div.

HTML

<div class="wrapper">
    <div class="column">
        <img src="http://www.lorempixel.com/200/200/" />
    </div>    
</div>

CSS

.wrapper {
    width:200px;
    margin:0 auto;
}
.column {
    width:100%;
    background:#cc0000;
}

img {
    width:100%;
}

Это пространство фактически является результатом элементов descender в шрифтах. Вы можете избавиться от него несколькими способами:

Один из способов - установить display:block на img, заставив его заполнить родительский элемент.

jsFiddle here - он работает.

img {
    width:100%;
    display:block;
}

Альтернативно, если вам не нравится этот подход, вы также можете изменить выравнивание по вертикали, поскольку по умолчанию это baseline.