Gambar & Media Responsif

Aturan emas gambar responsif

Gambar berukuran 1200px di layar ponsel 360px akan meluber keluar halaman. Satu aturan CSS ini menyelesaikan sebagian besar masalah:

img {
  max-width: 100%;   /* tidak pernah lebih lebar dari induknya */
  height: auto;      /* tinggi menyesuaikan, rasio terjaga */
  display: block;    /* hilangkan celah kecil di bawah gambar */
}

Tulis ini di reset global proyekmu. Dengan max-width (bukan width), gambar kecil tetap pada ukuran aslinya dan hanya gambar besar yang mengecil.

object-fit: mengisi kotak tanpa gepeng

Bila gambar dipaksa masuk ke kotak berukuran tetap, gambar bisa gepeng. object-fit mengaturnya seperti background-size:

.avatar {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
}

object-position mengatur bagian gambar yang diutamakan, misalnya object-position: top agar wajah di bagian atas tetap terlihat.

aspect-ratio: menjaga proporsi

.thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;    /* tinggi otomatis mengikuti lebar */
  object-fit: cover;
}
.kotak-persegi { aspect-ratio: 1; }

Dulu orang memakai trik padding-bottom persen. Sekarang cukup aspect-ratio.

Video dan iframe responsif

video, iframe {
  max-width: 100%;
}
.video-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.video-embed iframe { width: 100%; height: 100%; }

Bagian HTML: srcset dan picture

Selain CSS, HTML punya fitur agar ponsel tidak mengunduh gambar raksasa:

<img src="kecil.jpg"
     srcset="kecil.jpg 480w, sedang.jpg 800w, besar.jpg 1600w"
     sizes="(min-width: 800px) 800px, 100vw"
     alt="Pemandangan pantai">

<picture>
  <source media="(min-width: 800px)" srcset="lebar.jpg">
  <img src="persegi.jpg" alt="Pemandangan pantai">
</picture>

• srcset: daftar versi gambar beserta lebarnya; browser memilih yang paling pas.
• <picture>: mengganti gambar sesuai kondisi (art direction), misalnya potongan berbeda untuk ponsel.