Даже если ячейка содержит только изображение, вы должны знать, что их высота вычисляется в соответствии с положением базовой линии text ;и текущий стиль текста влияет на вычисление этой базовой позиции и межстрочного интервала после нее.Вы можете подумать, что установки «line-height: 1» было бы достаточно, чтобы избежать такого межстрочного интервала, то есть пропуска полей, который всегда происходит ниже каждой строки текста.Этого недостаточно.Самое простое решение - установить " line-height: 0.8 " (или ниже) для ячейки, содержащей изображение, так, чтобы по умолчанию на 0,2em добавлялся пробел ниже базовой линии (который по-прежнему выводится по умолчанию из-заотсутствие текста) приведет к подгонке базовой линии по высоте ячейки.Затем вы можете правильно разместить изображение (или любой элемент с фиксированной высотой) в ячейке, высота которой будет определять высоту ячейки, не растягивая высоту ячейки.
Примечание: с этой высотой строки любой текст вы быместо в этой ячейке будет иметь свою базовую линию только в нижней части ячейки, так что потомки будут перекрывать нижние отступы, границы, интервалы между границами текущей ячейки или границы, отступы или содержимое ячейки в следующей строкеили содержимое под таблицей, если ячейка была в последней строке.
Протестировано в Google Chrome (текущая версия 15)
Пример (HTML5):
<!DOCTYPE html>
<html><head>
<title>Examples of image transforms (rotations and mirroring)</title>
<style>
table,tbody,tr,td,image{margin:0;border:1px solid #999;border-collapse:collapse;border-spacing:0;background:#FFF;color:#000;padding:0;vertical-align:middle;text-align:center;}
td.z{line-height:0;}
</style>
</head><body>
<table border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td style="border-bottom:hidden">Normal 0° (1,0,0,1,0,0)</td>
<td style="border-bottom:hidden">Mirrored 0° (-1,0,0,1,0,0)</td>
<td style="border-bottom:hidden">Mirrored 90° (0,1,1,0,0,0)</td>
<td style="border-bottom:hidden">Normal −90° (0,1,-1,0,0,0)</td>
</tr><tr>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(1,0,0,1,0,0);"/></td>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(-1,0,0,1,0,0);"/></td>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,1,1,0,0,0);"/></td>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,1,-1,0,0,0);"/></td>
</tr><tr>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(1,0,0,-1,0,0);"/></td>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(-1,0,0,-1,0,0);"/></td>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,-1,1,0,0,0);"/></td>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,-1,-1,0,0,0);"/></td>
</tr><tr>
<td style="border-top:hidden">Mirrored 180° (1,0,0,-1,0,0)</td>
<td style="border-top:hidden">Normal 180° (-1,0,0,-1,0,0)</td>
<td style="border-top:hidden">Normal 90° (0,-1,1,0,0,0)</td>
<td style="border-top:hidden">Mirrored −90° (0,-1,-1,0,0,0)</td>
</tr></tbody>
</table>
</body></html>
Обратите внимание на трюк с классом «z» для ячеек таблицы (line-height: 0), содержащих только изображение, чтобы они точно соответствовали размеру изображения.Изображения, показанные в этом примере, представляют собой небольшую квадратную фотографию в 8 различных ориентациях.Существует только тонкая серая граница 1px, заключающая каждую фотографию, и ее метка, отображаемая выше или ниже, фотографии вписываются точно в границы ячейки.
Обратите внимание, что при переориентации используются стили WebKit (для Safari и Chrome);вы можете добавить эквивалентные свойства для IE и Firefox, изменив префикс;для CSS3 префикс не понадобится.Если не эти преобразования не поддерживаются, изображения не будут переориентированы / зеркально отражены, но они все равно будут точно соответствовать ячейке без дополнительных внутренних пробелов.