Section ini membahas images dan media sebagai bagian dari Course CSS. Ikuti chapter di dalamnya secara berurutan karena setiap chapter dibangun di atas pemahaman chapter sebelumnya. Gunakan demo interaktif pada setiap halaman untuk melihat langsung efek kode yang sedang dibahas.

# Styling Images

Hias gambar dengan border-radius, bayangan, filter warna, dan beri caption yang semantik menggunakan figure serta figcaption.

Buka → # Width, Height, dan Intrinsic Ratio

Pahami ukuran asli dan rasio bawaan gambar, bedah resep max-width 100% plus height auto, dan cegah layout shift lewat atribut width dan height.

Buka → # Object Fit

Kuasai lima nilai object-fit untuk memuat gambar ke kotak berukuran tetap tanpa distorsi, plus resep thumbnail yang paling sering dipakai.

Buka → # Object Position

Tentukan bagian mana dari gambar yang tetap terlihat saat object-fit cover memotong, dari kata kunci hingga titik fokus yang presisi.

Buka → # Aspect Ratio

Bentuk kotak dengan perbandingan lebar-tinggi lewat aspect-ratio, cegah layout shift sebelum konten datang, dan padukan dengan object-fit.

Buka → # Gambar dalam Card

Rakit pola kartu lengkap — area media seragam, body, footer, pemotongan radius, dan efek zoom saat hover — dari bahan-bahan section ini.

Buka → # Gambar sebagai Background

Putuskan kapan gambar lebih tepat menjadi background, rangkai resep hero cover dan center, lalu pasang overlay gradien agar teks tetap terbaca.

Buka → # Responsive Media

Buat video dan iframe ikut menyusut dengan aspect-ratio, kenali padding-top hack sebagai sejarah, dan atur resolusi latar dengan image-set().

Buka →