El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com fer que les imatges del nostre lloc web s'adaptin a diferents mides de pantalla i dispositius. Les imatges responsives són essencials per garantir una bona experiència d'usuari en dispositius mòbils i per optimitzar el rendiment del lloc web.

Conceptes Clau

Imatges Flexibles: Imatges que s'ajusten automàticament a la mida del contenidor.
Imatges Adaptatives: Imatges que canvien segons la resolució de la pantalla.
Atributs srcset i sizes: Atributs HTML5 per especificar diferents versions d'una imatge per a diferents mides de pantalla.
Imatges en CSS: Ús de propietats CSS per fer les imatges responsives.

Imatges Flexibles

Les imatges flexibles s'ajusten automàticament a la mida del contenidor en què es troben. Això es pot aconseguir amb CSS utilitzant la propietat max-width.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
    <title>Imatges Flexibles</title>
</head>
<body>
    <img src="imatge.jpg" alt="Imatge flexible">
</body>
</html>

Explicació del Codi

max-width: 100%;: Fa que la imatge no excedeixi l'amplada del seu contenidor.
height: auto;: Manté la proporció de la imatge.

Imatges Adaptatives

Les imatges adaptatives canvien segons la resolució de la pantalla. Això es pot aconseguir utilitzant els atributs srcset i sizes en l'etiqueta <img>.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Imatges Adaptatives</title>
</head>
<body>
    <img 
        src="imatge-petita.jpg" 
        srcset="imatge-petita.jpg 480w, imatge-mitjana.jpg 800w, imatge-gran.jpg 1200w" 
        sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px" 
        alt="Imatge adaptativa">
</body>
</html>

Explicació del Codi

srcset: Defineix diferents versions de la imatge amb les seves respectives amplades.
sizes: Defineix quina imatge utilitzar segons l'amplada de la pantalla.

Imatges en CSS

També podem utilitzar CSS per fer que les imatges de fons siguin responsives.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .background-image {
            background-image: url('imatge.jpg');
            background-size: cover;
            background-position: center;
            width: 100%;
            height: 300px;
        }
    </style>
    <title>Imatges de Fons Responsives</title>
</head>
<body>
    <div class="background-image"></div>
</body>
</html>

Explicació del Codi

background-size: cover;: Fa que la imatge de fons cobreixi tot el contenidor.
background-position: center;: Centra la imatge de fons en el contenidor.

Exercici Pràctic

Objectiu

Crear una pàgina web amb una imatge flexible i una imatge adaptativa.

Instruccions

Crea un fitxer HTML.
Afegeix una imatge flexible utilitzant CSS.
Afegeix una imatge adaptativa utilitzant els atributs srcset i sizes.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
    <title>Exercici d'Imatges Responsives</title>
</head>
<body>
    <h1>Imatge Flexible</h1>
    <img src="imatge.jpg" alt="Imatge flexible">

    <h1>Imatge Adaptativa</h1>
    <img 
        src="imatge-petita.jpg" 
        srcset="imatge-petita.jpg 480w, imatge-mitjana.jpg 800w, imatge-gran.jpg 1200w" 
        sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px" 
        alt="Imatge adaptativa">
</body>
</html>

Resum

En aquest tema, hem après com fer que les imatges siguin responsives utilitzant tècniques com les imatges flexibles, les imatges adaptatives i les imatges de fons en CSS. Aquestes tècniques són essencials per garantir que el nostre lloc web es vegi bé en qualsevol dispositiu i per optimitzar el rendiment del lloc web.

Imatges Responsives

Conceptes Clau

Imatges Flexibles

Explicació del Codi

Imatges Adaptatives

Explicació del Codi

Imatges en CSS

Explicació del Codi

Exercici Pràctic

Objectiu

Instruccions

Solució

Resum

Domini del CSS: De Principiant a Avançat

Mòdul 1: Introducció al CSS

Mòdul 2: Estilització de Text i Fonts

Mòdul 3: Model de Caixa i Disseny

Mòdul 4: Posicionament i Flotació

Mòdul 5: Flexbox

Mòdul 6: CSS Grid

Mòdul 7: Tècniques Avançades de CSS

Mòdul 8: Disseny Responsiu

Mòdul 9: Preprocessadors i Frameworks

Mòdul 10: Millors Pràctiques i Optimització

Mòdul 11: Projecte: Construir un Lloc Web Responsiu