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

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

Answer 1

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

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

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

Answer 2

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

.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 для каждого из 2 условий и программно изменить их.