JavaScript cambia dinámicamente el tamaño de las imágenes

Un problema común al actualizar artículos en su propio sitio web es que las ilustraciones del artículo son demasiado anchas, lo que hace que toda la página web se distorsione. Sería demasiado problemático escalar cada ilustración antes de insertarla.

Encontré este tipo de cosas en un artículo que escribí hace algún tiempo. Más tarde, utilicé las propiedades de desbordamiento de CSS y ancho máximo para resolver temporalmente el problema de la deformación de la página. La ventaja de este método es que es simple, pero la desventaja es que destruirá el efecto de algunos detalles.

Por ejemplo, desbordamiento: oculto significa que cuando el ancho del elemento interno es mayor que el marco principal, el ancho excedente se oculta. Hacerlo puede provocar que parte del contenido se corte y oculte repentinamente, lo cual es una lástima para la audiencia.

Si limita el ancho máximo de las ilustraciones de los artículos mediante el atributo max-width, debe considerar la compatibilidad de cada navegador. IE6 no admite este atributo. En mi impresión, aunque algunos navegadores admiten este atributo, las imágenes no se escalan proporcionalmente (parece ser Safari y Opera, no lo recuerdo con claridad). Muy injusto para los usuarios de estos navegadores.

Por lo tanto, lo que finalmente elegí fue cambiar dinámicamente el tamaño de la imagen a través de JavaScript. Este método tiene buena compatibilidad con varios navegadores (muy pocas personas deshabilitarían JavaScript hoy en día, ¿verdad?) y si se cambia el tema, el tamaño máximo de las ilustraciones del artículo también se puede cambiar de manera flexible.

Hay dos soluciones. Dado que el tema que estoy usando está cargado con la biblioteca jQuery, se puede implementar con el siguiente código:

$ ( documento ) listo ( función ( ) {.
 $ ( '.post img' ) cada ( función ( ) {.
 var maxWidth = 100 // Ancho máximo de la imagen
 var maxHeight = 100 ; // Altura máxima de la imagen
 var relación = 0 ; // relación de escala
 var ancho = $ ( este ) ancho ( ) ; // Ancho real de la imagen.
 var altura = $ ( this ) altura ( ) ; // altura real de la imagen.

 //Comprueba si la imagen es súper ancha
 si ( ancho > ancho máximo ) {
 ratio = maxWidth / width // Calcular ratio de escala
 $ ( this ) css ( "width" , maxWidth ) ; // Establece el ancho de visualización real;
 altura = altura * proporción // Calcula la altura después de una escala igual
 $ ( this ) css ( "altura" , altura * relación ) ; // Establece la altura después de la escala proporcional;
 }

 //Comprueba si la imagen es muy alta
 si ( altura > altura máxima ) {
 ratio = maxHeight / height // Calcular ratio de escala
 $ ( this ) css ( "height" , maxHeight ) ; // Establece la altura de visualización real;
 ancho = ancho * relación // Calcula la altura después de una escala igual;
 $ ( this ) css ( "ancho" , ancho * relación ) ; // Establece la altura después de la escala proporcional;
 }
 } ) ;
 } ) ;

Si no desea cargar la biblioteca jQuery, puede utilizar el siguiente código:

 función ResizeImage ( imagen , ancho máximo de ilustración , alto máximo de ilustración )
 {
 if ( imagen. className == "Miniatura" )
 {
 w = imagen.ancho ;
 h = imagen.altura ;

 si ( w == 0 || h == 0 )
 {
 imagen.ancho = ancho máximo ;
 imagen.altura = altura máxima ;
 }
 de lo contrario si ( w > h )
 {
 if ( w > ancho máximo ) imagen.ancho = ancho máximo ;
 }
 demás
 {
 si ( h > altura máxima ) imagen altura = altura máxima ;
 }

 image.className = "Miniatura escalada" ;
 }
 }

Usar JavaScript puro es un poco más problemático, ya que es necesario agregar manualmente class="Thumbnail" a la imagen, pero el efecto final es el mismo.

Texto original: ajustar dinámicamente el tamaño de la imagen

Gracias bolo por tu aporte.