Bagaimana untuk mengelakkan imej daripada meregangkan dengan css

Teknologi CSS memainkan peranan yang sangat penting dalam reka bentuk web Melalui CSS, kami bukan sahaja boleh mengawal semua aspek gaya halaman web, tetapi juga mencapai banyak kesan halaman web yang cantik, teratur dan berfungsi sepenuhnya. Antaranya, paparan dan kawalan gambar merupakan salah satu teknologi yang paling kami bimbangi dan perlu kuasai. Dalam banyak kes, kita perlu membuat imej muncul mengikut keperluan reka bentuk pada halaman web, dan bukannya diregangkan atau dimampatkan Dalam kes ini, kita perlu menggunakan teknologi CSS untuk mencapai ini.

Pertama sekali, kita perlu memahami beberapa konsep asas yang berkaitan dengan saiz imej: ruang yang diduduki oleh imej dalam halaman web mempunyai dua dimensi, iaitu lebar dan tinggi. Oleh itu, kita perlu menetapkan atribut lebar dan ketinggian imej Dalam CSS, kedua-dua atribut ini masing-masing sepadan dengan lebar dan tinggi.

Sebagai contoh, kita boleh menggunakan kod CSS berikut untuk menjadikan lebar imej 300px dan ketinggian 200px:

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

Kod di atas boleh digunakan pada semua teg img dan lebar mereka dan Ketinggian kedua-duanya ditetapkan kepada 300px dan 200px. Kesan daripada ini ialah tidak kira apa saiz sebenar imej, ia akan diregangkan atau dimampatkan kepada 300px dan 200px dalam halaman web.

Walau bagaimanapun, dalam banyak kes, kami tidak mahu imej itu diregangkan atau dimampatkan, tetapi untuk mengekalkan perkadaran dan dimensi asalnya. Pada ketika ini, kita perlu menggunakan beberapa kaedah yang berbeza.

Kaedah pertama ialah menetapkan lebar maksimum dan ketinggian maksimum imej. Kesannya ialah jika saiz gambar lebih kecil daripada lebar maksimum dan ketinggian maksimum, maka ia akan dipaparkan mengikut saiz asal jika saiz gambar lebih besar daripada lebar maksimum dan ketinggian maksimum, maka ia akan dikurangkan secara berkadar sehingga ia sesuai dengan lebar maksimum dan ketinggian maksimum sehingga ketinggian maksimum.

Sebagai contoh, kita boleh menetapkan lebar maksimum imej kepada 300px dan ketinggian maksimum kepada 200px melalui kod CSS berikut:

img{
    max-width: 300px;
    max-height: 200px;
}

Kod di atas akan memastikan bahawa tidak kira apa saiz sebenar imej ialah, , ia tidak akan diregangkan atau dimampatkan, tetapi akan mengekalkan perkadaran dan dimensi asalnya sambil menyesuaikan diri dengan lebar maksimum dan ketinggian maksimum.

Kaedah kedua ialah menetapkan saiz imej kepada adaptif. Kesannya ialah saiz imej akan dilaraskan secara automatik mengikut saiz bekas, mengekalkan perkadaran tidak berubah.

Sebagai contoh, kita boleh menetapkan lebar dan tinggi imej kepada 100% melalui kod CSS berikut:

img{
    width: 100%;
    height: auto;
}

Dalam kod di atas, kami menetapkan lebar kepada 100% dan ketinggian kepada auto, yang bermaksud bahawa lebar imej akan dilaraskan secara automatik mengikut lebar bekas di mana ia terletak, dan ketinggian akan dikira secara automatik berdasarkan perubahan lebar untuk mengekalkan perkadaran asal.

Untuk meringkaskan, apabila kita perlu mengawal saiz imej, kita harus memberi keutamaan untuk menggunakan lebar maksimum dan atribut ketinggian maksimum, atau menetapkan saiz kepada penyesuaian. Kaedah ini boleh memastikan bahawa kesan paparan imej tidak terjejas oleh regangan dan pemampatan, sambil mengekalkan bahagian dan saiz asal, menjadikan paparan halaman web lebih cantik dan selesa.

Atas ialah kandungan terperinci Bagaimana untuk mengelakkan imej daripada meregangkan dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!