Question

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

<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，因此，基本上，当您调用旋转图像功能时，请它调整单元格的大小以适合新放置的图像。例如：

val master = parameters.getOrElse("master", "spark://hadoop-master:7077")
val conf = new SparkConf().setAppName("myApp").setMaster(master)

尽管我想拥有

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

对于该单元格应该完成相同的操作，但如果不是，则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';
}
}

调整表格单元格/行的大小以适合新旋转的图像

2 个答案: