Immagini responsive in HTML senza usare CSS

Mattepuffo's logo
Immagini responsive in HTML senza usare CSS

Immagini responsive in HTML senza usare CSS

Quando creiamo qualcosa di responsive in HTML, siamo soliti usare i CSS con le media queries.

Ma per quanto riaguarda le immagini, possiamo farne a meno usando il tag picture!

Qui sotto un esempio:

<picture>
   <source media="(max-width: 800px)" srcset="piccola.jpg">
   <img src="grande.jpg" alt="Test">
</picture>

Come vedete abbiamo impostato una immagine nella maniera classica (che sarà quella di default).

E poi abbiamo usato source indicando quando usarla (in questo caso una larghezza massima di 800px).

Ovviamente possiamo usare altri tag source per indicare immagini da usare in altre misure.

Enjoy!


Condividi

Commentami!