Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek dalam Elemen Div Semasa Auto-Saiz Semula untuk Saiz Tetingkap Berbeza?

Mengekalkan Nisbah Aspek untuk Elemen Div Pengubah Saiz Auto dalam Pelbagai Saiz Tetingkap

Dalam pembangunan web, selalunya diingini untuk mempunyai div pusat yang mengekalkan nisbah aspek tertentu sambil menyesuaikan diri dengan perubahan dalam saiz tetingkap. Walau bagaimanapun, mencari penyelesaian yang berkesan untuk kedua-dua pelarasan lebar dan ketinggian boleh menjadi mencabar.

Pendekatan Semasa

Kod CSS dan HTML yang disediakan mencipta div berpusat yang mengekalkan saiz tetap. Apabila saiz tetingkap menjadi lebih kecil, div mengecut tetapi tidak dengan cara yang mengekalkan nisbah aspek asalnya.

Penyelesaian Menggunakan Harta Nisbah aspek

Untuk menangani isu ini , anda boleh menggunakan sifat nisbah aspek. Sifat ini kini disokong secara meluas dan membolehkan anda menentukan nisbah tetap untuk dimensi elemen.

badan {
ketinggian: 100vh;
jidar: 0;
paparan: flex;
justify-content: center;
align-item: tengah;
latar belakang: kelabu;
}

.peringkat {
--r: 960 / 540;

nisbah aspek: var(--r);
lebar:min(90%, min(960px, 90vh*(var(--r))));

paparan: flex;
justify-content: center;
align-item: tengah;

latar belakang:

/* this gradient is a proof that the ratio is maintained since the angle is fixed */
linear-gradient(30deg,red 50%,transparent 50%),
chocolate;

}

1. Kira Nisbah Aspek: -- r pembolehubah menyimpan nisbah aspek yang dikira sebagai lebar / ketinggian saiz yang dikehendaki (960 / 540).
2. Tetapkan Nisbah Aspek: Sifat nisbah aspek menetapkan nisbah bidang kepada nilai yang dikira. Ini memastikan elemen sentiasa mengekalkan nisbah tersebut.
3. Kira Lebar: Sifat lebar ditetapkan menggunakan fungsi min() yang mengambil kira lebar asal, 90% daripada lebar tetingkap yang tersedia, dan 90vj kali nisbah aspek yang dikira. Formula ini memastikan elemen mengecut agar sesuai dengan tetingkap sambil mengekalkan nisbah bidangnya.
4. Pusat dan Gayakan Div: Div dipusatkan menggunakan flexbox dan latar belakangnya digayakan dengan kecerunan untuk menunjukkan bahawa nisbah aspek dikekalkan walaupun apabila elemen mengecut.

Penyelesaian ini memastikan bahawa elemen div mengekalkan nisbah aspeknya sambil menyesuaikan diri dengan saiz tetingkap yang berbeza, kedua-duanya dalam lebar dan tinggi.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek dalam Elemen Div Semasa Auto-Saiz Semula untuk Saiz Tetingkap Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!