Generator Kotak Rasio Aspek Buat kotak rasio aspek responsif dengan pendekatan CSS modern dan warisan.

🎨

Generator Kotak Rasio Aspek

Buat kotak rasio aspek responsif dengan pendekatan CSS modern dan warisan.

Pilih preset atau rasio kustom

Pilih dari rasio aspek umum (16:9, 4:3, 1:1) atau masukkan nilai kustom.

Konfigurasikan kotak

Atur lebar maksimum, warna latar belakang, dan pilih antara pendekatan CSS modern atau warisan.

Salin kode CSS

Pratinjau kotak rasio aspek dan salin kode CSS.

Loading tool...

What Is Generator Kotak Rasio Aspek?

Generator Kotak Rasio Aspek membuat kontainer responsif yang mempertahankan rasio lebar-tinggi tertentu tanpa memperhatikan ukurannya. Mem pertahankan rasio aspek sangat penting untuk video, gambar, kartu, dan elemen apa pun yang memerlukan dimensi proporsional. Alat ini menawarkan delapan preset umum: 1:1 (persegi), 4:3 (standar), 16:9 (layar lebar), 21:9 (ultrawide), 3:2 (foto), 9:16 (potret), 2:3 (poster), dan 3:4 (tablet). Anda juga dapat menyetel nilai rasio kustom. Alat ini mendukung baik properti aspect-ratio CSS modern maupun teknik padding-bottom warisan untuk dukungan browser yang lebih luas. Pratinjau menampilkan kotak rasio aspek dengan lebar maksimum dan warna latar belakang yang dapat disesuaikan, dan CSS yang dihasilkan mencakup pendekatan yang dipilih.

Why Use Generator Kotak Rasio Aspek?

Delapan preset rasio aspek umum plus input kustom
Kedua pendekatan CSS modern (aspect-ratio) dan warisan (padding-bottom)
Lebar maksimum dan warna latar belakang yang dapat disesuaikan
Pratinjau menampilkan kotak proporsional dengan akurat

Common Use Cases

Wadah Video

Buat wadah video responsif 16:9 untuk video tersemat.

Plaseholder Gambar

Simpan ruang untuk gambar saat sedang dimuat untuk mencegah pergeseran tata letak.

Kartu Responsif

Pertahankan proporsi kartu yang konsisten di berbagai ukuran layar.

Galeri Foto

Buat wadah gambar seragam untuk tata letak grid galeri.

Technical Guide

Properti aspect-ratio CSS modern secara langsung menyetel rasio aspek yang diinginkan: aspect-ratio: 16 / 9. Browser secara otomatis menghitung tinggi berdasarkan lebar elemen. Ini didukung di semua browser modern sejak tahun 2021. Teknik warisan menggunakan padding-bottom sebagai persentase dari lebar (karena persentase padding relatif terhadap lebar induk): padding-bottom: 56,25% membuat rasio 16:9 (9/16 * 100 = 56,25%). Pendekatan warisan memerlukan position: relative pada kontainer dan position: absolute; top: 0; left: 0; width: 100%; height: 100% pada konten anak. Pendekatan modern lebih sederhana dan lebih mudah dibaca. Kedua metode membuat kontainer responsif yang mempertahankan rasionya pada lebar apa pun. Properti max-width membatasi ukuran kontainer. Untuk gambar, properti object-fit mengontrol bagaimana gambar mengisi kontainer rasio aspek.

Tips & Best Practices

1
Gunakan properti aspect-ratio modern untuk kode yang lebih bersih dan sederhana
2
Jatuh kembali ke teknik padding-bottom untuk dukungan browser lama
3
Gunakan object-fit: cover pada gambar di dalam wadah rasio aspek
4
Atur lebar maksimum untuk mencegah kotak menjadi terlalu besar di layar lebar

Related Tools

Tanah Main CSS Flexbox

Penggalang CSS Flexbox visual dengan kontrol interaktif untuk semua properti wadah fleksibel.

🎨 CSS & Design

Papan Kerja CSS Grid

Pembangun CSS Grid visual dengan kontrol interaktif untuk kolom templat, baris, dan celah.

🎨 CSS & Design

Pengujian Desain Responsif

Pratinjau situs web pada titik breakpoint perangkat yang umum dengan viewer iframe bawaan.

🎨 CSS & Design

Pembuat Kueri Media

Buat kueri media CSS dengan kondisi fitur dan titik putus yang sudah ditentukan sebelumnya.

🎨 CSS & Design

Frequently Asked Questions

Q Apa itu aspect-ratio dalam CSS?

Properti aspect-ratio menyetel rasio lebar-tinggi yang dipilih untuk elemen, misalnya, aspect-ratio: 16 / 9.

Q Apakah properti aspect-ratio didukung di mana-mana?

Ya, didukung di semua browser modern (Chrome 88+, Firefox 89+, Safari 15+, Edge 88+).

Q Apa itu trik padding-bottom?

Teknik warisan di mana persentase padding-bottom (relatif terhadap lebar) mempertahankan rasio. 56,25% membuat 16:9.

Q Bagaimana saya memasukkan konten ke dalam kotak rasio aspek?

Dengan aspect-ratio modern, konten mengalir secara normal. Dengan padding-bottom, elemen anak perlu memiliki posisi: absolut.

Q Bisakah saya menggunakan aspect-ratio dengan gambar?

Ya, gabungkan aspect-ratio dengan object-fit pada gambar untuk wadah gambar responsif yang proporsional.

About This Tool

Generator Kotak Rasio Aspek is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.