HTML + Javascript: Dynamic Image Resize?

Question

Eu estou tentando obter algum JavaScript programaticamente ajustar a largura de uma tag img HTML para exibir várias imagens do tamanho correto.

Eu tenho uma tag img largura fixa no 800px para exibir uma imagem, esta é a largura máxima.

Se a imagem é maior, em seguida, 800px eu quero para exibi-lo na 800px largura;

Se a imagem for menor que 800px ampla eu quero preservar a sua largura para evitar esticá-lo.

Eu uso este código html / Javacript para obter uma solução parcial:

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" />

O código acima parece funcionar em todos os navegadores que eu testei exceto Safari (imagens não são exibidos a menos que você atualizar a página).

Eu sei que posso usar max-width CSS, mas isso não vai funcionar em IE <7, que é um show rolha.

Como posso começar este trabalho para todos os navegadores? Muito obrigado antecipadamente.

Answer 1

Eu nunca vi um safari no trabalho, mas você pode tentar mudar seu evento onload para isso:

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

Pode ser que, sem um valor de retorno, safari pensa que esse objeto não deve ser carregado.

Answer 2

Use o css IE6 + javascript corte:

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

Answer 3

Sem id:

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

Answer 4

Você já tentou macaco com img.style.width? Você também pode tentar ter 2 classes CSS para cada uma das 2 condições e programmaticly mudá-los.