调整大小 Table Cell/Row 以适合新旋转的图像

Question

我目前在 TABLE 中有图像。我可以使用 JavaScript 成功旋转我的图像，但不幸的是，当横向图像变成纵向图像时，图像会出现在 table 线上，而不是包含在原始单元格大小内，甚至更好，调整table 的大小以适应图像的新方向。

<HTML>
<HEAD>
  <STYLE>
    .north {
      transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      /* IE 9 */
      -webkit-transform: rotate(0deg);
      /* Safari and Chrome */
    }

    .west {
      transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      /* IE 9 */
      -webkit-transform: rotate(90deg);
      /* Safari and Chrome */
    }

    .south {
      transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      /* IE 9 */
      -webkit-transform: rotate(180deg);
      /* Safari and Chrome */
    }

    .east {
      transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      /* IE 9 */
      -webkit-transform: rotate(270deg);
      /* Safari and Chrome */
    }

    table {
      border: thin solid black;
      width: auto;
      height: auto;
    }
  </STYLE>
</HEAD>
<BODY>
  <h1>testing rotate</H1>
  <TABLE>
    <TR>
      <TD>
        <IMG WIDTH=1 6 SRC='rotate.png' onclick="rotateImage('image0')">
      </TD>
      <TD>
        <IMG WIDTH=1 6 SRC='rotate.png' onclick="rotateImage('image1')">
      </TD>
    </TR>
    <TR>
      <TD><img class='north' id='image0' src="http://yernana.co.uk/wp-content/uploads/2015/09/tickets.jpg" id="image" /></TD>
      <TD><img class='north' id='image1' src="http://yernana.co.uk/wp-content/uploads/2015/09/tickets.jpg" id="image" /></TD>
    </TR>
  </TABLE>

  <SCRIPT>
    function rotateImage(elementID) {
      alert('Rotating' + elementID);
      alert(document.getElementById(elementID).className);
      if (document.getElementById(elementID).className == "north") {
        alert('changing to west');
        document.getElementById(elementID).className = 'west';
      } else if (document.getElementById(elementID).className == 'west') {
        alert('changing to south');
        document.getElementById(elementID).className = 'south';
      } else if (document.getElementById(elementID).className == 'south') {
        alert('changing to east');
        document.getElementById(elementID).className = 'east';
      } else if (document.getElementById(elementID).className == 'east') {
        alert('changing to north');
        document.getElementById(elementID).className = 'north';
      }
    }
  </SCRIPT>
</BODY>
</HTML>

关于如何解决这个问题有什么建议吗？

Answer 1

您可以使用 javascript 修改 css，所以基本上当您调用旋转图像函数时，让它调整单元格的大小以适应新定位的图像。例如：

document.getElementById('tdelement').style.width = "300px";

虽然我想

width: auto;

因为细胞应该完成同样的事情，但如果不是，javascript 解决方案应该足够了。

Answer 2

这是JavaScript我用来解决问题的

function rotateImage(elementID, cellID) {
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;
}
else if(document.getElementById(elementID).className == 'west'){
    alert('changing to south');
    document.getElementById(elementID).className = 'south';
}
else if(document.getElementById(elementID).className == 'south'){
    alert('changing to east');
    document.getElementById(elementID).className = 'east';
}
else if(document.getElementById(elementID).className =='east'){
    alert('changing to north');
    document.getElementById(elementID).className = 'north';
}
}

调整大小 Table Cell/Row 以适合新旋转的图像

Resize Table Cell/Row to fit newly rotated image

html

javascript

css

html-table

rotation