https://jsfiddle.net/3tanm7yu/2/
我目前在 TABLE 中有图像。我可以使用 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>
关于如何解决这个问题有什么建议吗？
最佳答案
您可以使用 javascript 修改 css，所以基本上当您调用旋转图像函数时，让它调整单元格的大小以适应新定位的图像。 例如:
document.getElementById('tdelement').style.width = "300px";
虽然我想有
width: auto;
对于单元格应该完成同样的事情，但如果不是，javascript 解决方案应该足够了。
关于javascript - 调整表格单元格/行的大小以适合新旋转的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51197922/