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

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