HTML + Javascript: Cambiar el tamaño de imagen dinámica?

Question

Estoy tratando de conseguir un poco de JavaScript programación para ajustar el ancho de una etiqueta HTML img de mostrar varias imágenes de tamaño correctamente.

I tiene una etiqueta fijada anchura 800px en Safari para mostrar una imagen, esto es el ancho max.

Si la imagen es más ancha que max-width quiero mostrarlo en IE amplia;

Si la imagen es menor que <=> amplia Quiero preservar su anchura para evitar estirarla.

Yo uso este código html / javacript para obtener una solución 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" />

El código anterior parece que funciona en todos los navegadores que he probado, excepto <=> (imágenes no se muestran a menos que actualice la página).

Sé que puedo utilizar CSS <=> pero eso no funcionará en <=> <7, que es un tapón de la demostración.

¿Cómo puedo conseguir este trabajo para todos los navegadores? Muchas gracias de antemano.

Answer 1

Nunca he visto un safari en el trabajo, pero se puede tratar de cambiar su proceso de carga a lo siguiente:

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

Podría ser que sin un valor de retorno, Safari piensa que este objeto no debe ser cargado.

Answer 2

Utilice el css IE6 + Javascript Hack:

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

Answer 3

Sin ID:

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

Answer 4

¿Has probado mono con img.style.width? También puede probar que tiene 2 clases CSS para cada una de las 2 condiciones y programmaticly cambiarlos.