Foto kegiatan sering memiliki ukuran berbeda. Ketika ditampilkan dalam kartu artikel, foto potret dapat membuat satu kartu jauh lebih tinggi daripada kartu lain. Latihan ini membuat bingkai thumbnail yang konsisten tanpa menarik wajah menjadi lebar atau pipih.
Siapkan dua berkas
Buat folder latihan. Masukkan foto milik sendiri bernama kegiatan.jpg dan berkas thumbnail.html. Pilih foto yang menampilkan objek di tengah serta ruang kosong di sekelilingnya agar perubahan potongan mudah terlihat. Jangan memakai foto orang tanpa hak penggunaan yang sesuai.
Salin contoh berikut ke thumbnail.html, simpan, lalu buka di browser. Sesuaikan alt text dengan isi foto yang benar-benar dipakai; teks contoh bukan deskripsi untuk semua gambar.
<!doctype html>
<html lang="id">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Latihan thumbnail responsif</title>
<style>
body { font: 1rem/1.6 system-ui; margin: auto; padding: 1rem;
max-width: 48rem; color: #17324d; }
figure { margin: 0; }
.foto { display: block; width: 100%; height: auto;
aspect-ratio: 16 / 9; object-fit: cover;
object-position: 50% 35%; background: #e7eef5; }
figcaption { padding-block: .75rem; }
</style>
<h1>Dokumentasi kegiatan kelas</h1>
<figure>
<img class="foto" src="kegiatan.jpg"
alt="Peserta kelas merakit prototipe di meja praktik">
<figcaption>Latihan mengatur bingkai foto.</figcaption>
</figure>
</html>Bedakan bingkai dan isi gambar
width: 100% mengikuti lebar wadah. aspect-ratio: 16 / 9 menetapkan rasio pilihan bingkai, sedangkan tinggi tetap otomatis. Pada contoh ini, foto dimasukkan ke bingkai tersebut menggunakan object-fit. Rasio memerlukan setidaknya satu dimensi otomatis; memberi lebar dan tinggi tetap sekaligus dapat membuat pengaturan rasio tidak berpengaruh.
cover mengisi seluruh bingkai sambil mempertahankan proporsi foto, sehingga sebagian isi dapat terpotong. contain menampilkan seluruh foto secara proporsional, tetapi dapat meninggalkan ruang kosong. Pilih cover untuk thumbnail kegiatan jika potongannya tetap bermakna. Untuk diagram, poster, atau foto produk dengan informasi di tepi, pertimbangkan contain atau tampilkan rasio asli.
Atur fokus tanpa mengubah berkas asli
Ubah object-position dari 50% 35% ke 50% 50%, simpan, dan muat ulang. Bandingkan bagian yang terlihat saat cover memotong foto. Nilai 35% bukan patokan posisi mata untuk semua foto; sesuaikan per gambar. Jika subjek tetap terpotong pada layar kecil, gunakan contain atau bingkai dengan rasio berbeda.
Uji dengan tiga percobaan
- Persempit jendela browser. Bingkai harus mengikuti lebar wadah dan tidak membuat halaman melebar ke samping.
- Ganti cover menjadi contain. Seluruh foto seharusnya terlihat; ruang kosong bukan kesalahan bila rasio foto berbeda.
- Ganti foto lanskap dengan foto potret. Periksa wajah, tulisan, dan objek penting pada kedua mode.
Catat pilihan mode dan titik fokus untuk setiap foto. Hindari memakai satu angka posisi untuk seluruh koleksi tanpa memeriksa hasilnya. CSS hanya mengatur tampilan; ukuran unduhan tidak otomatis mengecil. Siapkan juga berkas gambar yang dimensinya sesuai kebutuhan dan sudah dikompresi.
Jika gambar tidak muncul
Periksa apakah kegiatan.jpg berada di folder yang sama, termasuk ejaan huruf besar dan ekstensi. Jika kode justru tampil sebagai teks, ikuti cara memeriksa ekstensi HTML. Untuk deskripsi gambar, lanjutkan ke latihan alt text.
Tugas singkat
Buat dua kartu memakai foto yang sama: kartu pertama memakai cover, kartu kedua contain. Tulis satu kalimat tentang informasi yang hilang karena pemotongan. Latihan selesai ketika pilihan bingkai didasarkan pada isi foto dan tetap terbaca saat layar dipersempit.
Referensi
MDN: rasio aspek dan MDN: object-fit, diperiksa 4 November 2026.