Javascript-форум - Увеличение изображения по клику

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Увеличение изображения по клику (https://javascript.ru/forum/misc/62587-uvelichenie-izobrazheniya-po-kliku.html)

Увеличение изображения по клику

Всех приветствую. Нарыл в инете js скрипт, который по клику увеличивает изображение. Но увеличивает он только длину изображения, не затрагивая ширину. 2 дня возился с доработкой скрипта, так ничего и не получилось. Подскажите, пожалуйста, как его модернизировать. Вот, собственно, и сам скрипт:

<script language = "JavaScript">
var bigsize = "300"; //Размер большой картинки
var smallsize = "150"; //Размер маленькой картинки
function changeSizeImage(im) {
  if(im.height == bigsize) im.height = smallsize;
  else im.height = bigsize;
}
</script>

html:

<table align="center">
  <tr>
    <td align="center">
      <img src="foto1.jpg" height="150" onclick="changeSizeImage(this)" />
      <br />
      <b>Фото 1</b>
    </td>
    <td align="center">
      <img src="foto2.jpg" height="150" onclick="changeSizeImage(this)" />
      <br />
      <b>Фото 2</b>
    </td>
  </tr>
</table>

_alta_,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .big{
      transform: scale(2);
    }

 </style>
 </head>

<body>

<table align="center">
  <tr>
    <td align="center">
      <img src="http://javascript.ru/forum/images/smilies/cray.gif" height="150" onclick="this.classList.toggle('big')" />
      <br />
      <b>Фото 1</b>
    </td>
    <td align="center">
      <img src="http://javascript.ru/forum/images/smilies/cray.gif" height="150" onclick="this.classList.toggle('big')" />
      <br />
      <b>Фото 2</b>
    </td>
  </tr>
</table>


</body>
</html>

https://webref.ru/css/transform

Цитата:

Сообщение от рони (Сообщение 414419)

_alta_,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .big{
      transform: scale(2);
    }

 </style>
 </head>

<body>

<table align="center">
  <tr>
    <td align="center">
      <img src="http://javascript.ru/forum/images/smilies/cray.gif" height="150" onclick="this.classList.toggle('big')" />
      <br />
      <b>Фото 1</b>
    </td>
    <td align="center">
      <img src="http://javascript.ru/forum/images/smilies/cray.gif" height="150" onclick="this.classList.toggle('big')" />
      <br />
      <b>Фото 2</b>
    </td>
  </tr>
</table>


</body>
</html>

https://webref.ru/css/transform

Благодарю. Очень выручили. +сик влепил.