Sebagai pembangun web, anda sering merasa malu untuk bekerja dengan elemen HTML yang dengan sendirinya - berbeza dengan elemen img, misalnya - tidak mempunyai ukuran tetap atau nisbah aspek tetap. Selalunya anda ingin mencapai bahawa objek-objek ini berkelakuan responsif, tetapi bahagian antara lebar dan tinggi dipertahankan. CSS tidak menawarkan penyelesaian intuitif di sini secara lalai. Tetapi dengan bantuan harta tanah menegak anda boleh mencapai matlamat anda.
Mari kita ambil contoh gambar artikel persegi setiap hari, grafiknya tidak semestinya persegi, tetapi kami ingin memaparkannya dengan nisbah aspek 1: 1 tanpa usaha tambahan dan di atas semua tanpa herotan, di mana lebarnya (dan juga tinggi) berubah secara responsif semestinya. Dengan kod berikut sangat mudah untuk melakukan ini tanpa markup tambahan dengan bantuan CSS:
1bc3a80de3db90cdf0535541236d95f2
dengan hasilnya
Tetapi mengapa ia berfungsi dan bagaimana nisbah aspek lain dapat dibuat? Kunci untuk ini terletak pada sifat padding, yang - diberikan dalam nilai peratusan - selalu didasarkan pada nilai asas yang sama dengan harta Width (iaitu lebar elemen induk). Dengan padding-kiri dan padding-right ini jelas, dengan padding-top dan padding-bottom mengejutkan, tetapi sangat membantu dalam hal ini.
Sebagai contoh, jika anda mahukan nisbah aspek 16: 9, anda memilih nilai lebar: 100%; padding-bottom: 56.25% ;. Nisbah aspek yang mengambil kira nisbah emas adalah lebar: 100%; bahagian bawah: 61.81%; dapat direalisasikan.
Dengan bantuan calc, anda dapat secara langsung menentukan nisbah aspek, misalnya untuk 16: 9 dengan padding-bottom: calc (1 / (16/9) * 100%). Sekiranya elemen tersebut terdiri daripada elemen bersarang lebih jauh, elemen anak diposisikan secara mutlak untuk mengimbangi pelapisan elemen induk:
1bc3a80de3db90cdf0535541236d95f2
Ini membawa kepada hasil berikut: