Изменение ширины изображения с помощью JavaScript

Оффтоп javascript
1

Привет всем! Я новичок в JavaScript и у меня возник вопрос об изменении атрибутов изображения. Мне нужно изменить ширину картинки в зависимости от ее текущей ширины. Вот что я пытаюсь сделать:

let текущаяШирина = изображение.width;
if (текущаяШирина > 300) {
  текущаяШирина = 300;
}
изображение.setAttribute('width', текущаяШирина);
изображение.src = источник;
изображение.className = класс;

Но этот код не работает как нужно. Может кто-нибудь подсказать, как правильно изменить ширину изображения с помощью JavaScript? Буду благодарен за любую помощь!

2

Кстати, еще один способ - использовать CSS max-width. Просто задаешь max-width: 300px; для картинки, и браузер сам все сделает. Типа:

img {
max-width: 300px;
height: auto;
}

Так картинка сама подстроится под нужный размер, если больше 300px. И код чище получается, без лишних проверок. Попробуй, может понравится такой вариант!

3

Я бы посоветовал использовать метод naturalWidth вместо просто width. Он дает реальный размер картинки, даже если она еще не загрузилась. Вот пример:

img.onload = function() {
  if (this.naturalWidth > 300) {
    this.width = 300;
  }
};
img.src = источник;

Так ты точно получишь правильную ширину. И да, width можно менять напрямую, без setAttribute. Это работает быстрее и проще.

4

а у меня похожая ситуация была недавно, тоже мучился с изменением ширины картинки. в итоге нашел простое решение - использовать свойство style.width вместо setAttribute. вот как это можно сделать:

изображение.style.width = текущаяШирина + ‘px’;

еще один момент - лучше проверять ширину после загрузки картинки, чтобы наверняка. можно добавить обработчик onload:

изображение.onload = function() {
if (this.width > 300) {
this.style.width = ‘300px’;
}
};

надеюсь, этот вариант поможет решить твою задачу! удачи в освоении javascript!