Bagaimanakah Saya Boleh Mengubah Saiz Imej dalam HTML Sambil Mengekalkan Nisbah Aspek?

Memelihara Nisbah Aspek semasa Saiz Semula Imej

Apabila bekerja dengan imej, adalah penting untuk mengekalkan nisbah bidang bagi memastikan ia dipaparkan dengan betul. Walau bagaimanapun, penetapan kedua-dua atribut lebar dan tinggi dalam HTML selalunya membawa kepada herotan.

Pertimbangkan kod HTML berikut:

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

Untuk mengubah saiz imej sambil mengekalkan nisbah bidangnya, gunakan CSS berikut peraturan:

img {
    display: block;
    max-width: 500px;
}

Paparan: blok; harta memastikan imej berkelakuan seperti elemen blok, membolehkan ia mengisi lebar bekasnya. Sifat max-width menetapkan lebar maksimum untuk imej, memastikan ia tidak melebihi lebar itu sambil mengekalkan ketinggiannya.

CSS ini juga digunakan pada HTML berikut:

<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 dalam HTML Sambil Mengekalkan Nisbah Aspek?" >

Menggunakan pendekatan ini, imej dimensi berbeza akan diubah saiz secara berkadaran, mengekalkan nisbah bidang sambil mematuhi maksimum yang ditentukan lebar.

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