Resize Table Cell/Row to fit newly rotated image

Question

I currently have images inside a TABLE. I can successfully rotate my images using JavaScript, but unfortunately when the landscape images become portrait the images then appear over the table lines, rather than being contained within the original cell size, or even better, adjusting the size of the table to fit the new orientation of the image.

<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>

Any suggestions on how I can fix this?

I'll have a look at the JSFiddle, I don't understand why. The CAPS is a style thing I learned a long time ago and haven't managed to shake it off. — David Jack, Jul 05 '18 at 18:52
I fixed the JSFiddle but I have not yet found a solution to your problem.. https://jsfiddle.net/3tanm7yu/15/ — Rodrigo Ehlers, Jul 05 '18 at 18:55
this could be helpful and might be answered here: https://stackoverflow.com/questions/16301625/rotated-elements-in-css-that-affects-their-parents-height-correctly — joknawe, Jul 05 '18 at 18:58

silencedogood · Accepted Answer · 2018-07-05T18:57:24.260

1

You could modify the css using javascript, so basically when you call your rotate image function, have it adjust the size of the cell to fit the newly positioned image. For example:

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

although I'd imagine having

width: auto;

for the cell should accomplish the same thing, but if not the javascript solution should suffice.

edited Jul 05 '18 at 18:57

answered Jul 05 '18 at 18:51

silencedogood

3,209
1
11
36

Perfect. Thank you! – David Jack Jul 05 '18 at 19:02
1

No prob, nice implementation :) – silencedogood Jul 06 '18 at 17:43

score 0 · Answer 2 · answered Jul 05 '18 at 19:03

Here is the JavaScript I used to fix the issue

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';
}
}

Resize Table Cell/Row to fit newly rotated image

2 Answers2