Bagaimana untuk menetapkan lebar dan ketinggian imej dalam css

Gambar memainkan peranan penting dalam reka bentuk web Menetapkan lebar dan ketinggian gambar dengan betul boleh menjadikan halaman web lebih cantik dan mempunyai struktur yang lebih munasabah. Jadi, bagaimana untuk menetapkan lebar dan ketinggian imej melalui CSS?

Pertama sekali, anda perlu memberi perhatian kepada perkara berikut apabila memasukkan imej ke dalam kod HTML:

1. Gunakan atribut alt: Atribut alt digunakan untuk menambah penerangan teks pada imej yang diselitkan. Jika imej gagal dimuatkan, atribut alt juga boleh membantu pengguna memahami kandungan imej.
2. Nyatakan lebar dan tinggi imej: Apabila menetapkan lebar dan tinggi imej, anda boleh menggunakan atribut lebar dan ketinggian teg HTML. Walau bagaimanapun, kaedah ini tidak fleksibel dan tidak dapat mencapai reka bentuk responsif untuk peranti dengan saiz yang berbeza.

Oleh itu, adalah pilihan yang lebih baik untuk menggunakan sifat imej latar belakang CSS dan sifat saiz latar belakang untuk menetapkan lebar dan ketinggian imej. Berikut ialah beberapa petua CSS praktikal:

① Tetapkan lebar dan tinggi tetap

Gunakan atribut lebar dan tinggi dalam CSS untuk menetapkan lebar dan tinggi tetap imej, seperti ditunjukkan di bawah:

.img{
  width: 300px; /*设置图片宽*/
  height: 200px; /*设置图片高*/
}

Sudah tentu, ia juga boleh ditetapkan dengan singkatan:

.img{
  width: 300px; height: 200px; /*用“；”隔开即可*/
}

② Lebar dan ketinggian boleh suai mengikut bekas

Kadang-kadang, kita perlu sedar bahawa imej berubah dengan saiz bekas Dan lebar dan ketinggian penyesuaian. Pada masa ini, anda boleh menggunakan atribut saiz latar belakang dalam CSS dan menetapkan nilainya kepada "mengandungi" atau "penutup".

"mengandungi" bermaksud imej dipaparkan sepenuhnya, tetapi ia mungkin tidak cukup lebar atau tinggi

"penutup" bermaksud imej memenuhi bekas, tetapi kami tidak dapat menjamin bahawa imej dipaparkan sepenuhnya.

Seperti yang ditunjukkan di bawah:

.img{
  background-image: url(./img/bg.jpg); /*设置背景图片地址*/
  background-size: contain; /*或者：background-size: cover;*/
}

③ Skala imej secara berkadar

Untuk memastikan perkadaran imej kekal tidak berubah, kita boleh menetapkan "padding- nilai atas" sebagai peratusan "harta benda. Ia akan menentukan ketinggian imej berdasarkan lebar bekas induk, dengan itu mencapai penskalaan berkadar.

.img{
  background-image: url(./img/bg.jpg); /*设置背景图片地址*/
  padding-top: 50%; /*比例数值等于图片的高/宽*100% */
  background-size: cover; /*铺满背景容器*/
}

Di atas ialah tiga cara biasa untuk menetapkan lebar dan ketinggian imej CSS. Melalui penggunaan yang fleksibel, kami boleh mengoptimumkan paparan imej dalam reka bentuk web dengan mudah dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan lebar dan ketinggian imej dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!