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

img {
  max-width: 100%;
  max-height: 100%;
}

Menggunakan kaedah ini, imej akan berkadar secara automatik. Skala agar sesuai dengan saiz bekas sambil mengekalkan nisbah bidang imej.

2 Gunakan atribut object-fit

max-width 和 max-height 属性，或使用 object-fit 属性。

详细展开回答：

1. 使用 max-width 和 max-height 属性

img {
  object-fit: contain;
}

使用这种方法，图片将自动等比例缩放以适应容器的大小，同时保持图像的宽高比。

2. 使用 object-fit 属性

rrreee

object-fit 属性有以下几种值：

• contain：图片等比例缩放以完全填充容器，同时保持图像的宽高比。
• cover：图片等比例缩放以完全填充容器，但可能会裁剪图片。
• fill：图片拉伸以填充容器，忽略图像的宽高比。

注意：

• object-fitrrreee
object-fit atribut mempunyai nilai berikut:

• mengandungi:
  • Gambar diskalakan nisbah yang sama Isi bekas sepenuhnya sambil mengekalkan nisbah bidang imej.
  • kulit:
  • Imej diskalakan untuk mengisi bekas sepenuhnya, tetapi imej mungkin dipangkas.
isi:

Imej terbentang untuk mengisi bekas, mengabaikan nisbah bidang imej. 🎜🎜🎜🎜Nota: 🎜🎜🎜🎜 atribut sesuai objek memerlukan sokongan penyemak imbas dan mungkin tidak berfungsi dalam penyemak imbas lama. 🎜🎜🎜Apabila menggunakan CSS untuk menskala imej, anda perlu memberi perhatian kepada perkara berikut: 🎜🎜🎜Menatal boleh menyebabkan kualiti imej menurun. 🎜🎜Jika nisbah bidang imej berbeza daripada bekas, ia boleh menyebabkan imej itu herot. 🎜🎜Saiz asal imej hendaklah digunakan apabila boleh untuk kualiti terbaik. 🎜🎜🎜🎜

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!