旋转单元格中的图像与表格中的其他单元格重叠

Question

<table  border = "1">
 <tr><td ><img id="cell1" src="http://farm8.staticflickr.com/7153/6852073179_00961ba267.jpg"></img>Cell 1</td ></tr>
<tr><td align="center">Cell 2<img id="cell2" src="https://www.google.com/images/srpr/logo3w.png"></img></td></tr>
<tr><td align="center">Cell 3</td></tr>
</table>

我想在表格中显示旋转的图像。我正在使用webkit-transform：rotate（90deg）将图像旋转到90度。 但是当我旋转时，旋转的图像与表格中的其他单元格重叠。

点击此处查看jsfiddle http://jsfiddle.net/5RF5W/

我想扩展/缩小宽度＆amp;基于旋转图像的单元格2的高度。

Answer 1

您可以使用jQuery设置父TD的高度：

$( ".rotated" ).each( function( index, element ){
    $(this).closest("td").height(this.width)
});

jsFiddle Demo