HTML + Javascript: динамическое изменение размера изображения?

Question

Я пытаюсь получить немного JavaScript программно настроить HTML img ширина тега для правильного отображения изображений разных размеров.

У меня фиксированная ширина img пометить в 800px чтобы отобразить изображение, это максимальная ширина.

Если изображение шире, то 800px Я хочу показать это в 800px широкий;

Если изображение меньше чем 800px Я хочу сохранить ширину, чтобы не растягивать ее.

Я использую этот HTML / Javacript код, чтобы получить частичное решение:

function resize_image(id) {
 var img = document.getElementById(id);
 var normal_width = img.width;
 img.removeAttribute("width");
 var real_width = img.width;
 if (real_width < normal_width) {
  img.width = real_width;
 } else {
  img.width = normal_width;
 }
}

<img id="myimage" onload="resize_image(self.id);" src="https://via.placeholder.com/350x150" width="800" />

Приведенный выше код работает во всех протестированных браузерах, кроме Safari (изображения не отображаются, пока вы не обновите страницу).

Я знаю, что могу использовать CSS max-width но это не будет работать на IE < 7, который является выставочным стопором.

Как я могу заставить это работать для всех браузеров? Спасибо заранее.

Answer 1

Я никогда не видел сафари в работе, но вы можете попробовать изменить событие onload на это:

onload="resize_image(self.id);return true"

Возможно, что без возвращаемого значения safari считает, что этот объект не должен загружаться.

Answer 2

Используйте взлом IE6 css+javascript:

.dynamic_img {
    width: expression(document.body.clientWidth <= 800? "auto" : "800px");
    max-width: 800px; //For normal browsers
}

Answer 3

Без идентификатора:

...
  function resize_image( img )
  {
     //var img = document.getElementById( id );
...
  <img onload="resize_image(this);" src="IMAGE.JPG" width="800" />

Answer 4

Вы пробовали обезьяну с img.style.width? Вы также можете попробовать иметь 2 класса CSS для каждого из двух условий и программно изменить их.