pantalla - imagen cover css

Escalado de imagen con CSS

Question

Realmente no lo necesito ahora, pero solo por curiosidad ...

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

Entonces tenemos dos usuarios: un programador con una pantalla de 1920 píxeles, llamémoslo Jo, y una estudiante con un teléfono inteligente, llamémosla Nancy (porque todo está mejor con Nancy, ¿no?).

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

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

Answer 1

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

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 se redimensionarán también al 100%. Problema resuelto, todos felices!

Answer 2

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

Answer 3

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

height:auto

De lo contrario, la altura no se escalaría.