El tamaño de las imágenes en la página web parece ser el mismo. En las páginas de artículos más comunes con múltiples imágenes, el tamaño de la imagen suele ser el mismo que el ancho de la página. De esta manera, la página parece una forma cilíndrica recta. Si ves demasiado de este diseño, te sentirás muy monótono. Creo que esta situación se debe en gran medida a las limitaciones de los navegadores anticuados. Sin embargo, con la popularidad de los navegadores modernos (Firefox/Google/IE11), los navegadores tienen cada vez menos restricciones en el diseño de la página, y la imaginación de los programadores web puede ejercerse en gran medida.
Por ejemplo, Leng Zhi: ¿Sabes cómo proviene la [x] de la que proviene cada ventana? En este artículo, muchas imágenes exceden el límite del ancho del texto, dando a las personas una sensación de asombrosa y asombrosa. Al mismo tiempo, se muestran imágenes grandes en su tamaño real, dando a las personas una sensación más impactante.
Pero técnicamente, podemos limitar fácilmente las imágenes con el ancho máximo del texto, para que todos mantengan un ancho, y cuando no seguimos el ancho del texto, necesitamos el tamaño de cada imagen. Podemos declarar el tamaño original de la imagen al editar en el servidor. Una forma más flexible es obtener dinámicamente el tamaño original de la imagen colocando una pieza de JS en la página y cambia dinámicamente el tamaño de visualización de la imagen. Esto es compatible con el ancho máximo de texto anterior, y también puede hacer que la imagen parezca su tamaño original cuando sea necesario.
¿Cómo obtener el tamaño original de la imagen en el lado del navegador usando JavaScript?
La copia del código es la siguiente:
var img = $ ("#img_id"); // consigue mi img elem
var pic_real_width, pic_real_height;
$ ("<img/>") // hacer en memoria de la imagen de la imagen para evitar problemas de CSS
.attr ("src", $ (img) .attr ("src"))
.Load (function () {
pic_real_width = this.width; // nota: $ (esto) .Width () no
pic_real_height = this.Height; // Trabajar para imágenes de memoria.
});
WebKit Browser (Google Chrome, etc.) solo puede obtener valores de altura y ancho después del evento cargado de la imagen. Por lo tanto, no puede usar la función de tiempo de espera para esperar retrasado, la mejor manera es usar el evento de encendido de la imagen.
Para evitar el impacto de CSS en el tamaño de la imagen, el código de arriba copia la imagen en la memoria para el cálculo.
Si su página es una página pasada de moda, puede incrustar este código en la parte inferior de la página según sea necesario, y no requiere que modifique la página original.