Bagaimanakah Saya Boleh Mengubah Saiz Imej Semasa Mengekalkan Nisbah Aspek Menggunakan CSS?

Paksa Saiz Imej sambil Mengekalkan Nisbah Aspek

Apabila bekerja dengan imej, selalunya perlu mengubah saiz imej kepada dimensi tertentu. Walau bagaimanapun, mengekalkan nisbah bidang memastikan imej tidak kelihatan herot atau renggang.

Percubaan Awal:

Pada mulanya, dimensi tertentu dan peraturan CSS tersuai digunakan untuk mengubah saiz imej, tetapi nisbah bidang tidak dikekalkan:

<img src="/static/imghwm/default1.png" data-src="big_image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="">

img {
  max-width: 500px;
}

Penyelesaian:

Untuk memaksa saiz semula imej sambil mengekalkan nisbah bidang, sifat CSS berikut boleh digunakan:

• paparan: blok;: Memastikan imej boleh mengalir dalam halaman kandungan.
• lebar maksimum:230px;: Menetapkan lebar maksimum imej.
• tinggi maksimum:95px;: Menetapkan ketinggian maksimum imej.
• lebar: auto;: Membenarkan imej mengisi ruang yang tersedia secara automatik dalam lebar maksimum dan ketinggian maksimum kekangan.
• tinggi: auto;: Melaraskan ketinggian secara automatik berdasarkan nisbah aspek sedia ada imej.

Hasil:

Menggunakan ini Peraturan CSS pada imej:

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/aEEkn.png" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="Bagaimanakah Saya Boleh Mengubah Saiz Imej Semasa Mengekalkan Nisbah Aspek Menggunakan CSS?" >

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

Keputusan dalam imej yang diubah saiz dalam dimensi maksimum yang ditentukan sambil mengekalkan nisbah aspek asalnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Saiz Imej Semasa Mengekalkan Nisbah Aspek Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!