tetapan saiz imej css

Apabila tapak web berkembang dan reka bentuk menjadi semakin kompleks, gambar telah menjadi elemen penting dalam reka bentuk tapak web. Dalam reka bentuk laman web, penetapan saiz imej adalah sangat penting, yang boleh menjejaskan kelajuan pemuatan dan pengalaman pengguna laman web secara langsung. Dalam artikel ini, kami akan memperkenalkan cara menetapkan saiz imej dalam CSS untuk membantu anda mereka bentuk tapak web anda dengan lebih baik.

1. Tetapkan saiz melalui atribut lebar dan ketinggian

Cara paling mudah untuk menetapkan saiz imej dalam CSS ialah menggunakan atribut lebar dan ketinggian. Dengan menetapkan nilai dua sifat ini, kita boleh mengawal saiz imej. Berikut ialah kod sampel:

img{
    width: 200px;
    height: 200px;
}

Dalam kod di atas, kami mengubah saiz imej kepada segi empat sama 200 piksel dengan menetapkan lebar: 200px dan tinggi: 200px. Sudah tentu, anda boleh menetapkan saiz imej dengan nilai yang sepadan.

Sila ambil perhatian bahawa set saiz menggunakan kaedah ini mungkin meregangkan atau memampatkan imej, jadi kualiti imej mungkin terjejas. Oleh itu, apabila menggunakan kaedah ini, pastikan nisbah bidang imej sepadan dengan saiz yang ditetapkan untuk mengelakkan menjejaskan kualiti imej.

2. Tetapkan saiz melalui atribut max-width dan max-height

Selain menggunakan atribut lebar dan tinggi, kita juga boleh menggunakan atribut max-width dan max-height untuk menetapkan saiz imej. Kaedah ini juga agak biasa dan tidak meregangkan atau memampatkan imej sambil mengekalkan nisbah aspek imej. Berikut ialah kod sampel:

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

Dalam kod di atas, kami menggunakan lebar maksimum: 100% dan ketinggian maksimum: 100% untuk menetapkan saiz maksimum imej. Ini bermakna tidak kira saiz sebenar imej, ia tidak akan melebihi saiz elemen induknya.

3 Gunakan atribut object-fit untuk melaraskan saiz imej

Apabila kedua-dua kaedah di atas tidak dapat memenuhi keperluan, kami juga boleh menggunakan atribut object-fit CSS3 untuk menyesuaikan secara adaptif saiz imej. Atribut muat objek menentukan cara kandungan elemen sesuai apabila dipaparkan dalam blok yang mengandunginya.

Terdapat empat nilai yang tersedia: isi, isi, tutup dan kecilkan. Berikut ialah perihalan nilai:

1. isi: Regangkan atau mampatkan imej secara berkadar untuk mengisi blok yang mengandunginya. Ini boleh menyebabkan herotan imej, jadi gunakan dengan berhati-hati.
2. mengandungi: Skalakan imej agar sesuai dengan bekasnya. Ini mengekalkan nisbah bidang imej dan mungkin menunjukkan kawasan bawah.
3. penutup: Skala imej untuk menutup keseluruhan bekas dan memangkas bahagian di luar bekas.
4. penurunan skala: Nilai ini serupa dengan kandungan, tetapi sentiasa memilih nilai terkecil antara saiz bekas dan saiz imej asal.

Berikut ialah contoh kod:

img{
    width: 300px;
    height: 200px;
    object-fit: contain;
}

Dalam kod di atas, kami menskalakan imej supaya ia sesuai dengan bekasnya dengan menetapkan muat objek kepada mengandungi.

Ringkasan:

Di atas ialah tiga cara untuk menetapkan saiz imej dalam CSS. Anda boleh memilih kaedah yang paling sesuai dengan projek anda. Untuk mencapai pengalaman pengguna yang baik, pastikan anda mempertimbangkan saiz dan kualiti imej serta kelajuan pemuatan tapak anda.

Atas ialah kandungan terperinci tetapan saiz imej css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!