El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Imatges i vídeos responsius

Següent ►
►

En aquest tema, aprendrem com fer que les imatges i els vídeos s'adaptin a diferents mides de pantalla per assegurar-nos que el nostre lloc web sigui accessible i visualment atractiu en qualsevol dispositiu. El disseny responsiu és una part essencial del desenvolupament web modern, ja que els usuaris accedeixen als llocs web des d'una varietat de dispositius amb diferents resolucions de pantalla.

Conceptes clau

  1. Imatges responsives:

    • Utilització de l'atribut srcset.
    • Utilització de l'atribut sizes.
    • Utilització de la propietat CSS max-width.

  2. Vídeos responsius:

    • Utilització de la propietat CSS max-width.
    • Utilització de contenidors flexibles.

Imatges responsives

Utilització de l'atribut srcset

L'atribut srcset permet especificar diferents versions d'una imatge per a diferents resolucions de pantalla. Això ajuda a carregar la imatge més adequada segons la mida de la pantalla de l'usuari.

<img src="imatge-petita.jpg" 
     srcset="imatge-petita.jpg 480w, imatge-mitjana.jpg 800w, imatge-gran.jpg 1200w" 
     alt="Descripció de la imatge">

En aquest exemple:

  • imatge-petita.jpg es carregarà en pantalles de fins a 480 píxels d'amplada.
  • imatge-mitjana.jpg es carregarà en pantalles de fins a 800 píxels d'amplada.
  • imatge-gran.jpg es carregarà en pantalles de fins a 1200 píxels d'amplada.

Utilització de l'atribut sizes

L'atribut sizes treballa conjuntament amb srcset per definir quan s'ha d'utilitzar cada imatge en funció de l'amplada de la pantalla.

<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="Descripció de la imatge">

Utilització de la propietat CSS max-width

Per assegurar-nos que les imatges no excedeixin l'amplada del contenidor pare, podem utilitzar la propietat CSS max-width.

<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>

Aquest codi CSS fa que qualsevol imatge dins del document HTML s'ajusti a l'amplada del seu contenidor sense deformar-se.

Vídeos responsius

Utilització de la propietat CSS max-width

Igual que amb les imatges, podem utilitzar max-width per fer que els vídeos siguin responsius.

<style>
  video {
    max-width: 100%;
    height: auto;
  }
</style>

Utilització de contenidors flexibles

Per assegurar-nos que els vídeos mantinguin la seva proporció d'aspecte, podem utilitzar contenidors flexibles.

<style>
  .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
  }

  .video-container iframe, 
  .video-container object, 
  .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>

Aquest codi CSS crea un contenidor que manté la proporció d'aspecte 16:9 per al vídeo, assegurant-se que el vídeo s'ajusti correctament a diferents mides de pantalla.

Exercicis pràctics

Exercici 1: Imatge responsive

Crea una pàgina HTML amb una imatge responsive utilitzant 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">
  <title>Imatge Responsive</title>
  <style>
    img {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <h1>Imatge Responsive</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="Descripció de la imatge">
</body>
</html>

Exercici 2: Vídeo responsive

Crea una pàgina HTML amb un vídeo de YouTube responsive utilitzant un contenidor flexible.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vídeo Responsive</title>
  <style>
    .video-container {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 */
      height: 0;
      overflow: hidden;
      max-width: 100%;
      background: #000;
    }

    .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <h1>Vídeo Responsive</h1>
  <div class="video-container">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
  </div>
</body>
</html>

Conclusió

En aquesta secció, hem après com fer que les imatges i els vídeos siguin responsius utilitzant atributs HTML com srcset i sizes, així com propietats CSS com max-width. També hem vist com utilitzar contenidors flexibles per mantenir la proporció d'aspecte dels vídeos. Aquests conceptes són fonamentals per assegurar-nos que el nostre lloc web sigui accessible i atractiu en qualsevol dispositiu.

◄ Anterior
◄
Següent ►
►

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats