Bagaimana untuk Mencapai 100% Lebar atau Tinggi Sambil Mengekalkan Nisbah Aspek dalam CSS?

Mencapai 100% Lebar atau Tinggi Semasa Mengekalkan Nisbah Aspek dalam CSS

Dalam CSS, tetapan lebar: 100% dan membiarkan ketinggian ditetapkan kepada auto (atau sebaliknya) ialah sering digunakan untuk mengekang imej. Walau bagaimanapun, ini boleh menyebabkan imej menjadi tidak seimbang lebar atau tinggi.

Untuk mengekalkan nisbah bidang sambil mengekang imej, pertimbangkan pendekatan berikut:

Kekang dan Pangkas Menggunakan DIV :

Sarangkan imej dalam DIV dan tetapkan lebar maksimum, ketinggian maksimum dan limpahannya: tersembunyi. Ini akan menghalang imej daripada melebihi dimensi yang ditentukan dan memangkas sebarang lebihan.

Kekalkan Nisbah Aspek dan Hadkan Dimensi Maksimum:

Gunakan lebar maksimum dan ketinggian maksimum sifat tanpa menyatakan dimensi minimum. Ini membolehkan imej mengekalkan nisbah bidang sambil memastikan ia tidak berkembang lebih besar daripada dimensi maksimum yang ditentukan.

Kod Contoh:

<code class="css">.image-container {
  max-width: 500px;
  max-height: 500px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: auto;
}</code>

Kod ini memastikan bahawa imej dalam .image-container tidak akan melebihi 500px dalam sama ada lebar atau tinggi sambil mengekalkan nisbah bidang asalnya.

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