Bagaimana untuk Mengekalkan Nisbah Aspek Apabila Auto-Saiz Semula Elemen Div?

Cara Mengekalkan Nisbah Aspek Semasa Mengubah Saiz Elemen Div Secara Automatik

Mencipta elemen div yang melaraskan saiznya secara automatik sambil mengekalkan nisbah aspek tertentu boleh menjadi cabaran. Matlamatnya adalah untuk memastikan div kekal berpusat di dalam tetingkap, mengecut atau mengembang mengikut keperluan agar sesuai dengan ruang yang tersedia tanpa memesongkan bentuknya.

Kunci untuk mencapainya terletak pada penggunaan sifat CSS yang membenarkan nisbah aspek kawalan dan saiz penyesuaian. Sifat nisbah aspek ialah alat berkuasa yang diperkenalkan dalam CSS3 yang membolehkan pembangun menentukan nisbah intrinsik antara ketinggian dan lebar. Nisbah ini akan dikekalkan tanpa mengira ruang yang tersedia.

Selain nisbah bidang, sifat lebar min dan ketinggian min boleh digunakan untuk menetapkan dimensi minimum untuk div. Dengan menggabungkan sifat ini, kita boleh mencipta elemen div yang menghormati nisbah bidang yang ditentukan sambil turut menyesuaikan dalam ruang tetingkap yang tersedia.

Pertimbangkan kod CSS berikut:

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}


.stage {
  --r: 960 / 540;

  aspect-ratio: var(--r);
  width:min(90%, min(960px, 90vh*(var(--r))));

  display: flex;
  justify-content: center;
  align-items: center;


  background: linear-gradient(30deg,red 50%,transparent 50%),
    chocolate;
}

Dalam contoh ini , kami mentakrifkan pembolehubah --r untuk menyimpan nisbah 960 hingga 540, mewakili nisbah bidang yang diingini. Sifat nisbah aspek kemudiannya digunakan untuk mengekalkan nisbah ini.

Sifat lebar ditetapkan kepada minimum 90% daripada lebar yang tersedia, 960px atau lebar yang dikira berdasarkan nisbah tinggi dan aspek yang tersedia. Ini memastikan bahawa div akan mengekalkan nisbah yang ditentukan semasa memasang dalam tetingkap.

Sifat lebar min dan ketinggian min tidak ditetapkan secara eksplisit, tetapi nilai lalai autonya akan membolehkan div mengecut untuk menampung saiz tetingkap yang lebih kecil sambil masih mengekalkan nisbah bidang.

Harta paparan ditetapkan kepada lentur untuk membolehkan penjajaran berpusat dalam div pembalut, dan sifat justify-content dan align-item digunakan untuk memusatkan kandungan dalam div.

Akibatnya, elemen div peringkat akan mengubah saiz secara automatik sambil mengekalkan nisbah bidangnya, memastikan ia kekal berpusat dan konsisten secara visual tanpa mengira dimensi tingkap.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Nisbah Aspek Apabila Auto-Saiz Semula Elemen Div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!