旋转/变换后确保图片保留在表格单元中

Question

我正在使用JavaScript和CSS尝试旋转图片。我还在调整表格中单元格的大小，以使图片适应其新的方向，但是我无法使图片在单元格中坐得很好，它似乎总是重叠（请参见图片）。我一直在玩css transform-origin，但我只是找不到那个甜蜜点，我想知道是否有人可以建议一种更简单的方法来使它很好地播放，因为我假设不同尺寸的图像需要一个独特的转换源。我正在学习JavaScript和更高级的CSS。

.north {
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-webkit-transform:rotate(0deg); /* Safari and Chrome */
transform-origin: 50% left;
}
.west {
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
transform-origin: width: calc(bottom + 100px) left;
}
.south {
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
transform-origin: 50% left;
}
.east {
transform:rotate(270deg);
-ms-transform:rotate(270deg); /* IE 9 */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
transform-origin: 50% left;
}

这是JScript

function rotateImage(elementID, cellID, buttonsID) {
    alert( 'Rotating' + elementID + "Resizing" + cellID);
    alert(document.getElementById(elementID).className);

    var img = document.getElementById(elementID);
    var height = img.clientHeight;
    var width = img.clientWidth;

    alert('Height = ' + height + 'width = ' +width);

    if(document.getElementById(elementID).className == "north"){
        alert('changing to west');
        document.getElementById(elementID).className = 'west';
        document.getElementById(cellID).style.height = width +30;
    }
    else if(document.getElementById(elementID).className == 'west'){
        alert('changing to south');
        document.getElementById(elementID).className = 'south';
        document.getElementById(cellID).style.height = height;
        document.getElementByID(buttonsID.className = 'editButtons');
    }
    else if(document.getElementById(elementID).className == 'south'){
        alert('changing to east');
        document.getElementById(elementID).className = 'east';
        document.getElementById(cellID).style.height = width + 30;
        document.getElementByID(buttonsID.className = 'editButtons');
    }
    else if(document.getElementById(elementID).className =='east'){
        alert('changing to north');
        document.getElementById(elementID).className = 'north';
        document.getElementById(cellID).style.height = height;
        document.getElementByID(buttonsID.className = 'editButtons');
    }
}