Вращение изображения в ячейке перекрывается с другими ячейками в таблице

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: поверните (90deg), чтобы повернуть изображение до 90 градусов. Но когда я поворачиваюсь, повернутое изображение перекрывается с другими ячейками в таблице.

Нажмите здесь для jsfiddle http://jsfiddle.net/5RF5W/

Я хочу, чтобы развернуть/уменьшить ширину & высоту ячейки 2 на основе повернутого изображения.

Answer 1

Вы можете установить высоту родительского TD с помощью JQuery:

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

jsFiddle Demo