Rumah >hujung hadapan web >tutorial css >Bagaimana untuk membuat skala imej secara proporsional dengan css
Menggunakan atribut lebar maks dan ketinggian maks atau padanan objek, anda boleh menskalakan imej secara berkadar dalam CSS dan mengekalkan nisbah bidang imej. . code> dan max-height property, atau gunakan property
object-fit
.
Jawapan terperinci:
1 Gunakan atribut max-width
dan max-height
<code class="css">img { max-width: 100%; max-height: 100%; }</code>
Menggunakan kaedah ini, imej akan berkadar secara automatik. Skala agar sesuai dengan saiz bekas sambil mengekalkan nisbah bidang imej.
2 Gunakan atributobject-fit
max-width
和 max-height
属性,或使用 object-fit
属性。
详细展开回答:
1. 使用 max-width
和 max-height
属性
<code class="css">img { object-fit: contain; }</code>
使用这种方法,图片将自动等比例缩放以适应容器的大小,同时保持图像的宽高比。
2. 使用 object-fit
属性
object-fit
属性有以下几种值:
注意:
object-fit
rrreeeobject-fit
atribut mempunyai nilai berikut: Atas ialah kandungan terperinci Bagaimana untuk membuat skala imej secara proporsional dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!