Bagaimana untuk Mengekalkan Nisbah Aspek Semasa Menetapkan Lebar atau Tinggi kepada 100% dalam CSS?

Mengekalkan Nisbah Aspek dengan 100% Lebar atau Tinggi dalam CSS

Apabila menggunakan CSS, kita selalunya perlu menetapkan lebar atau ketinggian imej kepada 100%. Walau bagaimanapun, berbuat demikian boleh mengakibatkan imej menjadi herot. Ini berlaku kerana nisbah bidang (hubungan berkadar antara lebar dan tinggi imej) tidak dikekalkan.

Untuk mengekalkan nisbah bidang semasa menggunakan lebar atau ketinggian 100%, kita perlu mengekang saiz imej dalam cara tertentu. Jika kita mentakrifkan hanya satu dimensi (lebar atau tinggi) pada imej, nisbah bidang dikekalkan secara automatik.

Namun, jika kita menetapkan kedua-dua lebar dan tinggi kepada 100%, imej mungkin menjadi terlalu besar untuk kita ruang yang dimaksudkan. Dalam kes ini, kita boleh meletakkan imej di dalam DIV dengan lebar atau ketinggian maksimum yang sesuai dengan keperluan kita. Kami kemudiannya boleh menggunakan limpahan:sifat tersembunyi untuk memangkas mana-mana bahagian imej yang melangkaui dimensi yang ditentukan.

Sebagai alternatif, kita boleh menggunakan sifat lebar maks dan ketinggian maksimum untuk mengawal saiz maksimum imej. Dengan menetapkan nilai ini tanpa mentakrifkan sebarang dimensi minimum, kami memastikan bahawa imej tidak akan herot dan tidak akan melebihi dimensi maksimum yang ditentukan.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Nisbah Aspek Semasa Menetapkan Lebar atau Tinggi kepada 100% dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!