Objek-Fit dan Objek-Objek dapat menyelesaikan masalah yang cacat dan tidak wajar dari gambar atau video di laman web. 1. Objek-sesuai mengawal kaedah pengisian. Nilai umum termasuk mengisi (regangan mengisi), mengandungi (simpan paparan penuh perkadaran), penutup (simpan kontena penutup proporsi), tiada (saiz asal) dan skala-bawah (sesuai untuk kandungan dinamik); 2. Posisi objek mengawal kedudukan kawasan tanaman, dan sintaks adalah serupa dengan kedudukan latar belakang, yang boleh digunakan untuk menentukan fokus visual; 3. Aplikasi sebenar termasuk tanaman avatar mudah alih, paparan bersatu susun atur gaya kad, penyesuaian video dan senario lain; 4. Perhatikan keserasian penyemak imbas dan menguji kesan pelbagai bahagian gambar untuk memastikan bahagian -bahagian utama tidak dipotong. Menguasai kedua -dua atribut ini dapat meningkatkan kawalan prestasi elemen media dalam bekas yang berbeza.

Sekiranya anda menghadapi masalah dengan ubah bentuk susun atur dan tanaman yang tidak wajar apabila memproses gambar atau video di laman web, kemungkinan besar ia tidak berguna untuk object-fit dan object-position . Walaupun kedua -dua sifat CSS ini kelihatan tidak mencolok, mereka dapat meningkatkan kawalan prestasi elemen media dalam bekas yang berbeza.

Objek-Fit: Mengawal bagaimana media diisi

Apabila anda meletakkan imej ke dalam bekas saiz tetap, imej boleh diregangkan atau tidak disengajakan. Pada masa ini, object-fit berguna.

Ia mempunyai beberapa nilai yang biasa digunakan:

• fill : Nilai lalai, mengisi seluruh bekas, tanpa mengira skala, mungkin cacat
• contain : Terus berskala untuk memastikan bahawa keseluruhan gambar dipaparkan dan bekas mungkin putih
• cover : Terus berskala untuk memastikan bahawa keseluruhan bekas dilindungi dan imej boleh dipotong
• none : Saiz Asal, Tiada Zum
• scale-down : Sama contain , tetapi yang lebih kecil akan diguna pakai (sesuai untuk kandungan dinamik)

Sebagai contoh, jika anda meletakkan gambar mendatar dalam div 300x200, jika anda menggunakan object-fit: cover , gambar akan berpusat dan dipotong, yang sesuai untuk paparan gambar penutup; Semasa menggunakan contain , keseluruhan gambar akan dipaparkan sepenuhnya di dalam kotak, yang sesuai untuk adegan pratonton album.

Posisi Objek: Mengawal kedudukan kawasan tanaman

Apabila menggunakan object-fit: cover atau none , imej boleh dipotong. Oleh itu, adakah anda mahu membuat keputusan untuk memulakan meletakkan? Inilah object-position yang dilakukan.

Sintaksnya sama dengan kedudukan latar belakang, seperti:

• object-position: center; (lalai)
• object-position: top left;
• object-position: 50% 30%;
• object-position: 10px 20px;

Jika anda mempunyai gambar rapat watak yang anda ingin sentiasa memaparkan dengan muka sebagai pusat, dan walaupun skala kontena berubah, kepala tidak akan dipotong, anda boleh menggunakannya bersempena dengan object-fit: cover dan object-position: center top .

Harta ini amat berguna dalam reka bentuk responsif, terutamanya apabila perlu menekankan tumpuan visual tertentu.

Cadangan aplikasi praktikal

Dalam perkembangan sebenar, perkara berikut perlu diperhatikan:

• Tanaman Avatar Mudah Alih : Gunakan cover position untuk memastikan gambar yang dimuat naik sentiasa difokuskan di kawasan yang ditentukan.
• Paparan bersatu gambar susun atur gaya kad : Sediakan bekas lebar dan ketinggian bersatu dan cover untuk memastikan visual yang kemas.
• Adaptasi Penyembuhan Video : Seperti gambar, tag video juga boleh menggunakan kedua -dua atribut ini untuk mengawal kawasan main balik.
• Perhatikan keserasian pelayar : Pelayar moden arus perdana menyokongnya, tetapi versi lama IE tidak boleh.

Di samping itu, jangan lupa untuk menguji kesan imej perkadaran yang berbeza dalam bekas untuk mengelakkan ruang kosong yang berlebihan atau bahagian kritikal yang dipotong.

Pada dasarnya itu sahaja. Menguasai object-fit dan object-position membolehkan anda untuk lebih fleksibel mengawal prestasi elemen media dalam pelbagai susun atur, dan kod itu juga ringkas dan jelas.

Atas ialah kandungan terperinci Menguasai Objek CSS-Fit dan Objek-Objek untuk Media. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!