Чтобы реализовать функцию масштабирования изображения в JavaScript при нажатии, вы можете использовать различные подходы. Вот несколько способов:

Метод 1: преобразование CSS

• Примените свойство преобразования CSS, чтобы масштабировать изображение при нажатии.
• Используйте JavaScript, чтобы добавить или удалить класс, применяющий преобразование.

<style>
  .zoomed {
    transform: scale(2); /* Adjust the scale value as needed */
    /* Add other styles for the zoomed image */
  }
</style>
<img src="path/to/image.jpg" onclick="zoomImage(this)" />
<script>
  function zoomImage(image) {
    image.classList.toggle('zoomed');
  }
</script>

Метод 2: манипулирование DOM в JavaScript

• Создайте функцию JavaScript, которая изменяет свойства ширины и высоты изображения при нажатии.

<img src="path/to/image.jpg" onclick="zoomImage(this)" />
<script>
  function zoomImage(image) {
    if (image.style.width === '') {
      image.style.width = '200%'; /* Adjust the width value as needed */
      image.style.height = 'auto';
    } else {
      image.style.width = '';
      image.style.height = '';
    }
  }
</script>

Метод 3: jQuery

• Если вы используете jQuery, вы можете добиться эффекта масштабирования с помощью нескольких строк кода.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<img src="path/to/image.jpg" onclick="zoomImage(this)" />
<script>
  function zoomImage(image) {
    $(image).toggleClass('zoomed');
  }
</script>

Это всего лишь несколько способов реализации функции масштабирования изображения в JavaScript. Не забудьте настроить значения масштабирования и стили в соответствии со своими требованиями.