Barebones CSS for Fluid Images

Zach echa un vistazo al uso fundamental de HTML+CSS para imágenes fluidas y responsivas. La mayor parte, diría yo, es lo que cabría esperar, pero las cosas se ponen raras cuando srcsetse involucra.

Me abrí camino y, además de lo extraño que notó Zach, quería agregar una cosa más. Empecemos así:

img src="./img.jpg" /

Sin ningún otro CSS involucrado, esto se representa en el “tamaño intrínseco” de la imagen. Digamos que la imagen original tiene 400 px de ancho, se representa con 400 px de ancho.

Deberíamos poner atributos widthy heighten las imágenes, porque permite que el navegador haga espacio para ellas incluso antes de descargarlas ( incluso cuando son fluidas , lo cual es genial). Entonces:

img src="./img.jpg" /

Tampoco hay nada terriblemente extraño allí. Incluso si aplicamos max-width: 100%el CSS, eso hará lo que queremos: preservar el espacio, comportarse con fluidez y no crecer más de lo que debería.

Pero dejemos de lado el max-width: 100%asunto por un segundo. Si solo usamos srcsety configuramos múltiples fuentes.

img src="./img.jpg"     /

BAM, soplamos el ancho de la cosa.

Eso no se procesará en 200pxo 400px, en realidad se procesará en 100vw, lo creas o no. Creo que eso se debe a que ese es el sizesvalor predeterminado. Normalmente pienso que el sizesatributo no es información sobre nada que tenga que ver con el diseño real , sino simplemente 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í tienes la prueba:

Vea el pequeño debajo donde todo lo que cambio es el sizes.

De todos modos, eso no es en lo que Zach se centró, pero es similar. Volvamos a poner lo responsable y agreguemos widthatributos height.

img src="./img.jpg"     /

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 con un ancho superior a 200 px, hemos limitado el ancho a 200 px. Zach lo expresa así:

El uso max-width: 100%limita la imagen al contenedor, pero tenga cuidado cuando lo use con srcset: ¡puede tener un límite más pequeño de lo que desea al usar [width]! Combínalo con width: autopara solucionar este problema.

El fragmento final 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;}