Escalado de HTML img

Estoy intentando mostrar algunas imágenes grandes con etiquetas HTML img. Por el momento salen del borde de la pantalla; ¿Cómo puedo escalarlos para que permanezcan 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 normales"?

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 puede terminar el contenedor, que no estarán relacionados con la imagen. No puedo especificar píxeles porque tengo que lidiar con una gran colección de imágenes, cada una con un tamaño de píxel diferente. El ancho máximo no funciona.

Solo configure widtho 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 es posible que no funcione para todos los usuarios.

css es suficiente:

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

Sé que esta pregunta se ha hecho durante mucho tiempo, pero a partir de hoy una respuesta simple es:

<img src="image.png" style="width: 55vw; min-width: 330px;" />

El uso de vw aquí indica que el ancho es relativo al 55% del ancho de la ventana gráfica.

Todos los principales navegadores de hoy en día lo admiten.

Consulta este enlace .

No se requiere Javascript.

IE6 Internet Explorer 6

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

CSS

html, body { height:100%; } 

Luego, usar un porcentaje funciona correctamente y se actualiza dinámicamente al cambiar 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 accesorios van a esta fuente: Ultimate IE6 Cheatsheet: Cómo corregir más de 25 errores de Internet Explorer 6

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

Creo que la mejor solución es cambiar el tamaño de las imágenes a través de un script o localmente y subirlas nuevamente. Recuerde, está obligando a sus espectadores a descargar archivos más grandes de lo que necesitan

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

1) configure el desbordamiento para desplazarse y de esa manera la imagen permanecerá adentro, 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 escalar automáticamente.

3) Vivir con él y establecer el ancho y el alto, aunque hará que se vea distorsionado, pero el tamaño correcto aún hará que el usuario tenga que descargar la imagen a tamaño completo.

¡Buena suerte!