Hari 4: Responsive Images

Membuat gambar ramah semua layar dengan max-width, object-fit, srcset, dan elemen picture.

Pengantar

Gambar sering merusak layout mobile jika lebarnya dipaksa. Setelah Grid, kita buat gambar yang ikut kontainer tanpa meluber.

Aturan dasar CSS

img {
  max-width: 100%;
  height: auto;
  display: block;
}

Gambar tidak meluber

<style>
body { font-family: system-ui, sans-serif; margin: 1rem; }
.frame {
  width: min(100%, 280px);
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
</style>
<div class="frame">
<img
  src="https://placehold.co/800x400/png?text=Lebar+800"
  alt="Contoh gambar lebar yang menyesuaikan frame"
/>
</div>
<p>Frame hanya 280px — gambar mengecil, tidak overflow.</p>

Preview

object-fit untuk crop rapi

Berguna untuk avatar / thumbnail dengan rasio tetap.

Avatar object-fit: cover

Preview

srcset & sizes (HTML)

Browser memilih file yang sesuai kepadatan/lebar layar:

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Hero"
/>

picture untuk art direction

Bedakan crop mobile vs desktop:

<picture>
  <source media="(max-width: 600px)" srcset="hero-mobile.jpg" />
  <img src="hero-desktop.jpg" alt="Hero" />
</picture>

picture + source media

<style>
body { font-family: system-ui, sans-serif; margin: 1rem; }
img { max-width: 100%; height: auto; border-radius: 0.75rem; display: block; }
</style>
<picture>
<source
  media="(max-width: 500px)"
  srcset="https://placehold.co/400x500/0f766e/fff?text=Mobile"
/>
<img
  src="https://placehold.co/800x320/0f172a/fff?text=Desktop"
  alt="Hero berbeda untuk mobile dan desktop"
/>
</picture>
<p>Perkecil preview di bawah ~500px untuk melihat versi mobile.</p>

Preview

Kuis hari 4

CSS mana yang paling dasar agar gambar tidak overflow kontainer?

Elemen picture berguna terutama untuk?

Checklist

0/4 selesai

Menerapkan max-width: 100% pada img
Mencoba object-fit: cover
Melihat pergantian picture saat resize
Siap ke responsive table

Hari 4: Responsive Images

Pengantar

Aturan dasar CSS

object-fit untuk crop rapi

srcset & sizes (HTML)

picture untuk art direction

Kuis hari 4

Checklist

Komentar