Изменить размер ячейки таблицы / строки, чтобы соответствовать вновь повернутому изображению - PullRequest
Новая
       7

Изменить размер ячейки таблицы / строки, чтобы соответствовать вновь повернутому изображению

0 голосов
/ 05 июля 2018

https://jsfiddle.net/3tanm7yu/2/

В настоящее время у меня есть изображения внутри таблицы. Я могу успешно вращать свои изображения с помощью 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>

Любые предложения о том, как я могу это исправить?

Ответы [ 2 ]

0 голосов
/ 05 июля 2018

Вот 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';
}
}
0 голосов
/ 05 июля 2018

Вы можете изменить CSS, используя javascript, поэтому, в основном, когда вы вызываете функцию поворота изображения, она должна отрегулировать размер ячейки, чтобы соответствовать новому позиционированному изображению. Например: 

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

хотя я представляю себе 

width: auto;

для ячейки должно быть выполнено то же самое, но если нет, то решения javascript должно быть достаточно.

...