escalado de imagen con CSS

que en realidad no lo necesito ahora, pero sólo por curiosidad ...escalado de imagen con CSS

Supongamos que tenemos un fluido diseño sitio web que funciona perfectamente bien en 1920px pantallas y en pequeños teléfonos inteligentes. Ahora digamos que tenemos imágenes allí y obviamente (¿obviamente?) Queremos escalarlas. Hemos subido imágenes de 2560 px en un servidor (porque a quién le importa el ancho de banda hoy en día) y hemos establecido la propiedad width: 100% en la etiqueta img.

Tenemos dos usuarios: un programador con una pantalla de 1920px, llamémosle Jo, y una estudiante con un teléfono inteligente, llamémosla Nancy (porque todo está mejor con Nancy, ¿no?).

Jo y Nancy están felices porque nuestro plan con escala de imágenes usando width: 100% funciona, pero ¿y si decidimos mostrar también imágenes pequeñas, algo así como 400px de ancho? Nancy no notará nada, pero para Jo sería un desastre.

Entonces la pregunta es: ¿podemos hacer felices a Jo y Nancy sin usar JavaScript?

Fuente

2012-01-09 Daniel J F

¿Qué califica como hacerlos felices? Además, servir imágenes de 2560 px a teléfonos inteligentes es una idea terrible. –

Se sentirán felices si nuestra imagen se escalará en el teléfono inteligente de Nancy y Jo verá una imagen de 400 píxeles, sin escalar. –

¿Quiere decir que ha establecido el atributo de ancho de la imagen al 100% como en ''? – MrMisterMan

¿Por qué no opta por el max-width: 100%?

Esto dejará todas las imágenes que son más pequeñas que el ancho de la pantalla solo y las que son más anchas que la pantalla también se cambiarán el tamaño del 100%. Problema resuelto, todos felices!

Fuente

2012-01-09 15:28:49 Filip

Esta es definitivamente la forma tradicional de hacer imágenes en un diseño web receptivo. –

¡Porque sería demasiado fácil, por supuesto! En realidad, respondiste mi pregunta, nunca he usado 'max-width' con imágenes, pero lo intenté ahora y funciona bien. Gracias. –

Agregaré que parece necesitar agregar 'height: auto' a las imágenes para evitar que las relaciones de aspecto se vuelvan sesgadas (al menos en el navegador móvil que estoy usando ahora ...) –

Si desea enviar diferentes imágenes a diferentes pantallas en función de su ancho, debe profundizar en las consultas de medios condicionales que escuchamos.
Este es un buen sitio web: http://webdesignerwall.com/tutorials/css3-media-queries

Fuente

2012-01-09 15:41:38

Gracias, ya los uso en casi todas partes. Solo pensé que sería una situación en la que no podría usar diferentes imágenes. –

que utilizan max-width: 100% como Filip había mencionado, pero también necesitaba incluir:

height:auto

De lo contrario la altura no se escala.

Fuente

2014-05-08 17:56:59 ContextSwitch

Respuesta

Cuestiones relacionadas