Escalado de HTML img

114

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.

html image-scaling

— rwallace
fuente

4

Tenga en cuenta que no se recomienda enviar imágenes grandes y hacerlas pequeñas con css. Es mejor tener diferentes versiones de la misma imagen para ahorrar ancho de banda y hacer que la página sea más receptiva (incluso si la imagen se verá pequeña, se enviará la imagen completa).

— Esteban Küber

1

rwallace, ¿estás usando .net o PHP o algo más que HTML puro?

— Dorjan

1

El tamaño del archivo de imagen no importa, no hay ningún requisito en el caso que estoy buscando para ser frugal con el ancho de banda. Estoy usando PHP, pero la solución HTML funciona.

— rwallace

135

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.

— RiddlerDev
fuente

7

Por favor, tenga en cuenta que hacer esto en imágenes masivas resultará en tiempos de descarga prolongados para las páginas que no deberían tener tiempos de descarga prolongados. Siempre es mejor cambiar el tamaño de la imagen si es posible.

— ceejayoz

¡Gracias! Resulta que su solución de solo establecer el ancho no solo funciona para el escalado correcto, sino que también hace la primera parte simplemente estableciendo el ancho en 100%.

— rwallace

2

@ceejayoz Estoy de acuerdo, pero eso no es lo que está preguntando.

— RiddlerDev

@ceejayoz Me pregunto, ¿por qué tarda más? ¿No tiene que cambiar de tamaño cuando lo muestra para ambas situaciones? ¿O está diciendo que cambie manualmente el tamaño de la imagen real y cambie el archivo?

— Abdul

2

@Abdul Estoy diciendo que una imagen de 5 MB de 3.000 x 3.000 píxeles no debe usarse en una ranura de 100 x 100 píxeles en su sitio web.

— ceejayoz

18

css es suficiente:

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

— Selvadurai Handeeban
fuente

9

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 .

— Dimitri de Jesus
fuente

1

vwfue un salvavidas para mí, los otros métodos no funcionaron para la imagen en cuestión.

— caram

6

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

— no identificado-1
fuente

6

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

— Ralph David Abernathy
fuente

2

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

— riotera
fuente

0

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!

— Dorjan
fuente