Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menangani herotan css img

Bagaimana untuk menangani herotan css img

藏色散人
藏色散人asal
2021-09-13 11:34:414268semak imbas

Penyelesaian kepada herotan css img: 1. Buka fail css yang sepadan; 2. Kekalkan panjang dan lebar kandungan elemen asal dengan menetapkan "object-fit:none;".

Bagaimana untuk menangani herotan css img

Persekitaran pengendalian artikel ini: sistem Windows 7, versi HTML5&&CSS3, komputer Dell G3.

Apa yang perlu dilakukan jika css img diherotkan?

Lebar gaya CSS: 100% herotan imej

Skrin ialah 1920 piksel, tetapkan lebar img: 1920px saiz tetap, imej tidak diherotkan , tetapkan lebar: 100 % herotan imej

img{
      display:block;  /*img图片比父元素高度小几个像素,设置为块元素,使得父子div高度一致*/
      width:100%;
}

Selesaikan masalah herotan imej yang disebabkan oleh lebar tetapan: 100% untuk menjadikan imej menyesuaikan dengan saiz skrin

object-fit: none;    /*保留原有元素内容的长度和宽度*/

Jika kesannya tidak jelas, anda boleh memilih teks dengan Dalam gambar, anda boleh melihat dengan jelas perbezaan kejelasan

img{
      width:100%;
      max-width:100%;
      object-fit:none;
}

Tetapi sila ambil perhatian bahawa selepas menetapkan object-fit:none, apabila saiz skrin adalah lebih kecil daripada saiz gambar, gambar akan dipangkas secara automatik ke kedudukan tengah

Peluasan berkaitan:

Pada tahun 1990, Tim Berners-Lee dan Robert Cailliau bersama-sama mencipta Web. Pada tahun 1994, Web benar-benar keluar dari makmal.

Sejak penciptaan HTML, gaya telah wujud dalam pelbagai bentuk. Pelayar yang berbeza menggabungkan bahasa gaya mereka sendiri untuk memberikan pengguna kawalan ke atas kesan halaman. HTML asal hanya mengandungi beberapa atribut paparan.

Dengan pertumbuhan HTML, untuk memenuhi keperluan pereka bentuk halaman, HTML telah menambah banyak fungsi paparan. Tetapi apabila fungsi ini meningkat, HTML menjadi lebih dan lebih kompleks, dan halaman HTML menjadi lebih dan lebih kembung. Jadi CSS dilahirkan.

Hakun Lee mencadangkan cadangan CSS asal pada tahun 1994. Pada masa itu, Bert Bos sedang mereka bentuk pelayar bernama Argo, jadi mereka memutuskan untuk mereka bentuk CSS bersama-sama.

Sebenarnya, sudah ada beberapa cadangan untuk menyatukan bahasa helaian gaya dalam industri Internet pada masa itu, tetapi CSS ialah bahasa helaian gaya pertama yang mengandungi makna yang kaya "melata". Dalam CSS, gaya dalam satu fail boleh diwarisi daripada helaian gaya lain. Pembaca boleh menggunakan gaya pilihannya sendiri di beberapa tempat dan mewarisi atau "lata" gaya pengarang di tempat lain. Pendekatan berlapis ini memberikan kedua-dua pengarang dan pembaca kelonggaran untuk menambah reka bentuk mereka sendiri dan menggabungkan perkara yang semua orang suka.

Ha Kun pertama kali mencadangkan CSS pada persidangan di Chicago pada tahun 1994. CSS dicadangkan sekali lagi pada persidangan rangkaian www pada tahun 1995. Bos menunjukkan contoh pelayar Argo yang menyokong CSS , Haken juga menunjukkan sokongan untuk CSS dalam Pelayar arena.

Pada tahun yang sama, organisasi W3C (World WideWeb Consortium) telah ditubuhkan Semua ahli kreatif CSS menjadi kumpulan kerja W3C dan berusaha sedaya-upaya untuk membangunkan piawaian CSS landasan yang betul. Semakin ramai ahli terlibat, seperti Thomas Reaxdon dari Microsoft, yang usahanya akhirnya membawa kepada sokongan untuk standard CSS dalam pelayar Internet Explorer. Ha Kun, Parsi dan lain-lain adalah peneraju teknikal utama projek ini. Pada penghujung tahun 1996, draf pertama CSS telah disiapkan pada bulan Disember tahun yang sama, piawaian rasmi pertama untuk Helaian Gaya Cascading (Cascading Style Sheets Tahap 1) telah disiapkan dan menjadi standard yang disyorkan oleh w3c.

Pada awal tahun 1997, kumpulan kerja W3C yang bertanggungjawab untuk CSS mula membincangkan isu yang tidak diliputi dalam versi pertama. Hasil perbincangan membentuk edisi kedua spesifikasi CSS yang diterbitkan pada Mei 1998.

Pembelajaran yang disyorkan: "tutorial video css"

Atas ialah kandungan terperinci Bagaimana untuk menangani herotan css img. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn