Высота таблицы таблицы CSS, равная высоте img

Question

У меня есть таблица CSS (display: table)> с внутренними divs (display: table-cell)> с внутренними imgs.

Ширины табличных ячеек равны ширине imgs, но проблема в том, что высота табличных ячеек невелика! Он добавляет дополнительные (4 или 5) px. Поэтому, если мой img равен 100px (высота), тогда table-cell составляет 104px.

JSFIDDLE

HTML

<div class="table"> 
    <div class="table-cell"><img src="http://www.ddwcolor.com/wp-content/uploads/2012/09/Blue-square1.jpg" alt=""></div> 
    <div class="table-cell"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Cyan-square.png" alt=""></div> 
    <div class="table-cell"><img src="http://www.ddwcolor.com/wp-content/uploads/2012/09/Blue-square1.jpg" alt=""></div> 
</div> 

CSS

.table { 
    display: table; 
} 

.table-cell { 
    display: table-cell; 
    background: black; 
} 

Пожалуйста, дайте мне знать, почему это происходит и как ее решить?

Answer 1

Добавить свойства изображения к изображениям.

.table { 
 
    display: table; 
 
} 
 
.table-cell { 
 
    display: table-cell; 
 
    background: black; 
 
} 
 
img { 
 
    display: block; 
 
}

<div class="table"> 
 
    <div class="table-cell"> 
 
    <img src="http://www.ddwcolor.com/wp-content/uploads/2012/09/Blue-square1.jpg" alt=""> 
 
    </div> 
 
    <div class="table-cell"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Cyan-square.png" alt=""> 
 
    </div> 
 
    <div class="table-cell"> 
 
    <img src="http://www.ddwcolor.com/wp-content/uploads/2012/09/Blue-square1.jpg" alt=""> 
 
    </div> 
 
</div>