Zach echa un vistazo a algunos usos fundamentales de HTML + CSS para imágenes fluidas y receptivas. La mayor parte, diría yo, es lo que cabría esperar, pero las cosas se ponen raras cuando srcset se involucra.
Me abrí paso y, además de lo extraño que notó Zach, quería agregar una cosa más. Empecemos así:
<img src="https://css-tricks.com/barebones-css-for-fluid-images/./img.jpg" alt="" />Sin otro CSS involucrado, esto se renderiza al “tamaño intrínseco” de la imagen. Digamos que la imagen original tiene 400 px de ancho, se renderiza a 400 px de ancho.
Deberíamos estar poniendo width y height atributos en las imágenes, porque permite que el navegador haga espacio para ellas incluso antes de que se descarguen (incluso cuando son fluidas, lo cual es genial). Entonces:
<img src="https://css-tricks.com/barebones-css-for-fluid-images/./img.jpg" alt="" width="400" height="300" />Tampoco hay nada terriblemente extraño allí. Incluso si damos una bofetada max-width: 100% en el CSS, eso hará lo que queremos: preservar el espacio, comportarse de manera fluida y no crecer más de lo que debería.
Pero esperemos el max-width: 100% cosa por un segundo. Si solo usamos srcset y configurar varias fuentes.
<img src="https://css-tricks.com/barebones-css-for-fluid-images/./img.jpg" alt=""
/>BAM, apagamos el ancho de la cosa.
Que no rendirá en 200px o 400px—En realidad se rendirá en 100vwlo crea o no. Creo que eso es porque eso es lo predeterminado sizes valor. Normalmente pienso en el sizes atributo como no información sobre nada que ver con el diseño real, sino solo información para que el navegador elija una fuente. Pero eso no es cierto aquí. Realmente afecta el diseño (en todos los navegadores que probé). Aquí está la prueba:
Mira el pequeño debajo de él, donde todo lo que cambio es el sizes.
De todos modos, eso no es en lo que Zach se enfocó, pero es similar. Dejemos lo responsable y agreguemos width y height atributos.
<img src="https://css-tricks.com/barebones-css-for-fluid-images/./img.jpg" alt="" width="200" height="137"
/>No más reventones (con o sin sizes) pero ahora tenemos un nuevo problema extraño. Esto es básicamente como decir max-width: 200px. Aunque tenemos fuentes que tienen un ancho superior a 200 px, hemos limitado el ancho a 200 px. Zach lo expresa así:
Utilizando max-width: 100% restringe la imagen al contenedor, pero tenga cuidado cuando use esto con srcset: Es posible que tenga un límite más pequeño de lo que desea al usar [width]! Par con width: auto para arreglar esto.
El último fragmento de Zach es este, que creo que reina en toda la rareza:
img {
max-width: 100%;
}
img[width] {
width: auto; /* Defer to max-width */
}
img[width][height] {
height: auto; /* Preserve aspect ratio */
}
/* Let SVG scale without boundaries */
img[src$=".svg"] {
width: 100%;
height: auto;
max-width: none;
}Enlace directo →