Nisbah Aspek CSS

Alat ini menjana CSS untuk nisbah aspek lebar:tinggi menggunakan sama ada sifat `aspect-ratio` moden atau hack padding peratusan klasik. Ia menyediakan preskrip nisbah biasa, input lebar/tinggi tersuai (1-100), kotak pratonton langsung, dan output sedia-salin. Pratonton menyesuaikan pemaparannya kepada kaedah yang dipilih supaya anda dapat melihat dengan tepat apa yang dihasilkan oleh setiap teknik.

1. Klik preskrip Nisbah Biasa (16:9, 4:3, 1:1, 21:9, 3:2, 2:3, 9:16) atau masukkan Lebar dan Tinggi tersuai (1-100). 2. Pilih Kaedah: Moden (`aspect-ratio`) atau Hack Padding. 3. Kotak Pratonton memaparkan nisbah menggunakan teknik yang dipilih. 4. Klik Salin pada kad Output untuk menyalin CSS yang dijana.

Moden mengeluarkan satu baris: `aspect-ratio: <lebar> / <tinggi>;`. Hack Padding mengeluarkan `.container` dengan `position: relative; width: 100%; padding-top: <tinggi/lebar*100>%;` dan `.content` diletakkan mutlak yang mengisinya, iaitu teknik warisan untuk persekitaran tanpa sokongan `aspect-ratio`. Pratonton menggunakan gaya yang sama, dihadkan pada lebar maks 400px, supaya visual sepadan dengan teknik yang diterangkan CSS.