Bagaimanakah saya boleh memastikan imej tidak melebihi saiz tertentu sambil mengekalkan nisbah bidang apabila menggunakan 100% lebar atau tinggi dalam CSS?

Mewujudkan Kekangan Nisbah Aspek untuk Lebar atau Tinggi 100% dalam CSS

Dalam CSS, menetapkan lebar atau tinggi 100% pada imej mengekalkan nisbah aspek tetapi boleh menghasilkan dalam imej terlalu besar atau terlalu kecil untuk kedudukan yang diingini.

Satu penyelesaian yang berpotensi ialah meletakkan imej dalam DIV dan gunakan limpahan:tersembunyi untuk memangkas sebarang lebihan. Walau bagaimanapun, ini hanya akan mengehadkan saiz imej dan tidak menjejaskan nisbah bidangnya.

Jika mengekalkan nisbah bidang tidak diperlukan, menetapkan sifat lebar maks dan ketinggian maksimum pada imej boleh memastikan ia tidak 't melebihi saiz tertentu sambil mengekalkan nisbah aspek. Dengan menetapkan dimensi maksimum ini, imej akan mengubah saiz dengan sewajarnya agar muat dalam sempadan yang ditentukan.

Contohnya:

<code class="css">img {
  max-width: 200px;
  max-height: 150px;
}</code>

Dengan pendekatan ini, imej tidak akan mengembang lebih besar daripada 200px lebarnya atau ketinggian 150px, sambil mengekalkan nisbah bidangnya.

Atas ialah kandungan terperinci Bagaimanakah saya boleh memastikan imej tidak melebihi saiz tertentu sambil mengekalkan nisbah bidang apabila menggunakan 100% lebar atau tinggi dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!