div - Escala de img HTML

title html

Question

Estoy tratando de mostrar algunas imágenes grandes con etiquetas HTML img. En este momento se salen del borde de la pantalla; ¿Cómo puedo escalarlos para permanecer dentro de la ventana del navegador?

O en el caso probable de que esto no sea posible, ¿es posible al menos decir "mostrar esta imagen al 50% de su ancho y alto normal"?

Los atributos de ancho y alto distorsionan la imagen, por lo que puedo decir, esto se debe a que se refieren a los atributos con los que el contenedor puede terminar, que no estarán relacionados con la imagen. No puedo especificar píxeles porque tengo que tratar con una gran colección de imágenes, cada una con un tamaño de píxel diferente. El ancho máximo no funciona.

Answer 1

No se requiere Javascript

IE6 Internet Explorer 6

El porcentaje solo funciona para el ancho de un elemento, pero la height:100%; no funciona sin el código correcto.

CSS

html, body { height:100%; }

Luego, usar un porcentaje funciona correctamente y actualiza dinámicamente el tamaño de la ventana.

<img src="image.jpg" style="height:80%;">

No necesita un atributo de ancho, el ancho se escala proporcionalmente a medida que se cambia el tamaño de la ventana del navegador.

Y esta pequeña joya, en caso de que la imagen se amplíe, no se verá (demasiado) en bloque (se interpola).

img { -ms-interpolation-mode: bicubic; }

Los apoyos van a esta fuente: Ultimate IE6 Cheatsheet: Cómo arreglar más de 25 errores de Internet Explorer 6

Answer 2

Agregar max-width: 100%; a la etiqueta img funciona para mí.

Answer 3

CSS es suficiente:

width : desired_width;
height: auto;/*to preserve the aspect ratio of the image*/

Answer 4

Creo que la mejor solución es cambiar el tamaño de las imágenes a través de secuencias de comandos o localmente y subirlas de nuevo. Recuerda, estás obligando a tus espectadores a descargar archivos más grandes de lo que necesitan

Answer 5

Echando un vistazo a la referencia de W3 Schools para la etiqueta img , deberías poder hacer algo como:

<img src="img.jpg" width="50%" height="50%"/>

Para escalar automáticamente a través de Javascript, consulte este consejo

Answer 6

La mejor forma en que sé cómo hacer esto es:

1) configurar el desbordamiento para desplazarse y de esa manera la imagen se mantendría pero puede desplazarse para verla en su lugar

2) sube una imagen más pequeña. Ahora hay muchos programas disponibles al cargar (necesitará algo como PHP o .net para hacer esto, por cierto) puede tener una escala automática.

3) Vivir con él y establecer el ancho y la altura, aunque lo hará parecer distorsionado, pero el tamaño correcto aún dará como resultado que el usuario tenga que descargar la imagen de tamaño completo.

¡Buena suerte!

Answer 7

Establezca solo el width o height , y escalará el otro automáticamente. Y sí, puedes usar un porcentaje.

La primera parte se puede hacer, pero requiere JavaScript, por lo que podría no funcionar para todos los usuarios.