En el disseny responsive, les imatges flexibles són essencials per assegurar que el contingut visual s'adapti correctament a diferents mides de pantalla. Aquest tema se centra en com fer que les imatges siguin responsives, de manera que es redimensionin automàticament per adaptar-se a l'espai disponible sense perdre la seva proporció original.

1. Proporcions d'Imatge:

   • Les imatges han de mantenir les seves proporcions originals per evitar distorsions.
   • Utilitza l'atribut width i height en percentatges o unitats relatives per mantenir les proporcions.

2. Unitats Relatives:

   • Utilitza unitats com %, vw (viewport width) i vh (viewport height) per definir les dimensions de les imatges de manera flexible.

3. Propietat CSS max-width:

   • La propietat max-width: 100%; és clau per assegurar que les imatges no excedeixin l'ample del seu contenidor.

4. Imatges Responsives amb srcset i sizes:

   • Utilitza els atributs srcset i sizes per carregar diferents versions d'una imatge segons la resolució de la pantalla.

A continuació, es mostra un exemple de com fer que una imatge sigui flexible utilitzant CSS:

• max-width: 100%;: Assegura que la imatge no excedeixi l'ample del seu contenidor.
• height: auto;: Manté la proporció original de la imatge mentre es redimensiona.

Objectiu: Crea una pàgina web amb una imatge que es redimensioni automàticament segons la mida de la finestra del navegador.

1. Crea un document HTML bàsic.
2. Afegeix una imatge amb la classe responsive-image.
3. Aplica l'estil CSS per fer que la imatge sigui flexible.

Segueix l'exemple proporcionat anteriorment per completar l'exercici. Assegura't de provar la pàgina redimensionant la finestra del navegador per veure com la imatge s'adapta.

• Error Comú: No establir height: auto; pot provocar que la imatge es distorsioni.
• Consell: Sempre prova les teves imatges en diferents dispositius i resolucions per assegurar-te que es veuen correctament.

Les imatges flexibles són un component fonamental del disseny responsive. Mitjançant l'ús de propietats CSS adequades i atributs HTML com srcset, pots assegurar-te que les imatges es mostrin correctament en qualsevol dispositiu. En el següent tema, explorarem com les unitats de viewport poden ajudar a crear dissenys encara més adaptables.