Cara Menggunakan Objek CSS-Fit dan Objek-Objek

mata teras

sifat CSS
• dan object-fit boleh digunakan untuk mengubah saiz dan meletakkan imej tertanam dan elemen penggantian lain, sama dengan sifat CSS object-position dan background-size untuk imej latar belakang. background-position Atribut
• menyediakan pelbagai pilihan untuk mengawal bagaimana imej dipaparkan di kawasan yang ditentukan, dan boleh menyembunyikan beberapa imej jika perlu. Ini berguna untuk menyesuaikan imej ke ruang tertentu tanpa herotan. object-fit Atribut
• mempunyai lima nilai kata kunci utama: object-fit, cover, contain, none, scale-down dan fill. Nilai -nilai ini menentukan bagaimana imej dipaparkan di dalam bekasnya, mungkin untuk meliputi kawasan, menyesuaikan diri dengan kawasan, mengekalkan saiz semula jadi, mengurangkan untuk menyesuaikan atau mengisi kotak kandungan.
Atribut
• object-position mengawal kedudukan elemen imej dalam kotak kandungannya. Nilai lalainya ialah 50% 50%, yang menyelaraskan pusat imej dengan pusat kotak kandungan, tetapi boleh diselaraskan menggunakan satu siri nilai kata kunci atau nilai panjang.
• Walaupun object-fit dan object-position direka untuk mengendalikan sebarang jenis elemen penggantian, mereka paling biasa digunakan untuk menyesuaikan imej ke ruang tertentu tanpa herotan. Mereka disokong dalam semua pelayar moden, tetapi tidak di Internet Explorer.

CSS menyediakan sifat background-size dan background-position untuk mengubah saiz dan meletakkan imej latar belakang. Ciri -ciri object-fit dan object-position membolehkan kita melakukan operasi yang sama pada imej tertanam (dan elemen penggantian lain, seperti video). Artikel ini akan menyelam bagaimana untuk menyesuaikan imej ke ruang tertentu menggunakan object-fit dan cara menggunakan object-position untuk mengawal kedudukan imej dengan tepat di ruang itu.

Penggunaan

object-fit Kadang -kadang, imej boleh terlalu besar untuk menyesuaikan ruang yang kita mahu. Pada masa lalu, kita terpaksa menanam imej dalam editor imej, atau mengubah saiz imej dengan menetapkan lebar dan/atau kekangan ketinggian (ini bukan pilihan yang sempurna), atau melakukan beberapa jenis tanaman kompleks, atau mungkin menggunakan imej latar belakang ( Jika imej bukan hanya untuk hiasan, yang merupakan kasihan).

Fungsi atribut pada imej adalah serupa dengan

pada imej latar: ia menyediakan pelbagai pilihan untuk mengawal bagaimana imej dipaparkan di kawasan yang ditentukan, dan dapat menyembunyikan beberapa kandungan imej jika perlu. Kawasan yang ditentukan ini mungkin mempunyai lebar dan ketinggian tetap, atau mungkin ruang yang lebih responsif, seperti kawasan mesh, yang tumbuh, mengecut, dan membengkokkan mengikut saiz paparan pelayar. object-fit Cara bekerja background-size

Setiap elemen HTML mempunyai "kotak kandungan" tersendiri yang mewakili ruang yang diduduki oleh elemen. Secara lalai, kotak kandungan imej sepadan dengan saiz semula jadi.

Apabila kita menggunakan lebar dan/atau ketinggian yang berbeza kepada imej, kita sebenarnya mengubah saiz kotak kandungan. Jika saiz kotak kandungan berubah, imej masih akan mengisi kotak kandungan. Jadi jika kita mempunyai imej 300px x 300px dan menetapkan saiznya kepada 300px x 200px, imej akan kelihatan cacat.

Hartanah

object-fit menyediakan pelbagai pilihan untuk kami memaparkan imej dalam kotak kandungan saiz. Kita boleh menyembunyikan sebahagian daripada imej, atau memaksa imej itu hanya sebahagiannya mengisi kotak kandungannya supaya imej itu kelihatan sepenuhnya dan tidak berubah.

Tetapan

Untuk menggambarkan secara terperinci bagaimana sifat object-fit berfungsi, kami meletakkan imej dalam div yang berpusat menggunakan susun atur grid. Div mempunyai latar belakang coklat dan sempadan bertitik disediakan oleh pseudo-elemen ::before, yang akan membantu kita memahami perubahan yang telah terjadi pada imej.

Lihat contoh SitePoint (@SitePoint) pada Codepen: Object-Fit: Persediaan

Untuk demonstrasi imej kami, kami akan menggunakan imej berikut (Oia, Santorini, Greece). Dimensi semulajadi adalah 400px x 600px.

Imej kami jauh lebih besar daripada div kami dan jika kami meletakkan imej di dalam div ia akan melimpah seperti yang ditunjukkan di bawah.

Lihat contoh SitePoint (@SitePoint) pada Codepen:

Object-Fit: Setup2

Matlamat kami adalah untuk mengelakkan imej daripada melimpah bekasnya seperti ini sambil menjadikannya selesa untuk menyesuaikan bekas, dan

akan membantu kami mencapai ini. object-fit

Jika kita menggunakan imej latar belakang, kita boleh menetapkan sesuatu yang serupa dengan

, dan imej latar belakang akan terhad kepada kawasan bekas. Walau bagaimanapun, seperti yang dapat kita lihat, agar background-size: cover bekerja, kita perlu menentukan lebar dan ketinggian kotak kandungan imej supaya ia berbeza dari dimensi semula jadi. Dalam contoh berikut, kita mengehadkan lebar dan ketinggian imej kepada 100% supaya kotak kandungannya sepadan dengan saiz div kontena: object-fit

<code class="language-css">img {
  width: 100%;
  height: 100%;
}</code>

inilah yang kelihatannya.

Lihat contoh SitePoint (@SitePoint) pada Codepen:

Object-Fit: Setup3

Imej dan kotak kandungannya kini sesuai dengan bekas, tetapi imejnya cacat. Di sinilah keajaiban

dimainkan, mari kita lihat apa yang boleh ditawarkan. object-fit

menggunakan imej adap ke kontena object-fit Atribut

object-fit menyediakan lima nilai kata kunci utama untuk menentukan bagaimana imej dipaparkan dalam bekasnya. Dua kata kunci- cover dan contain - melaksanakan fungsi yang sama seperti rakan -rakan mereka. background-size

object-fit: cover

Nilai memaksa imej untuk menutup sepenuhnya kawasan kontena, memaparkan seberapa banyak imej yang mungkin tanpa gangguan:

cover

Lihat contoh SitePoint (@SitePoint) pada Codepen:

<code class="language-css">img {
  width: 100%;
  height: 100%;
}</code>

Object-Fit: Cover

Kerana imejnya sangat tinggi, kita melihat lebarnya penuh, tetapi kita tidak dapat melihat ketinggian penuh, seperti yang ditunjukkan dalam imej berikut.

Nilai -nilai mungkin nilai yang paling praktikal yang disediakan dan lebih disukai dalam kebanyakan kes.

Apa yang perlu diperhatikan di sini ialah lokasi imej. Tidak seperti

(lalai adalah

, yang menempatkan imej latar belakang dari sudut kiri atas bekas), lalai cover adalah

, yang memusatkan imej dalam kotak kandungannya. Apabila kita melihat harta

kemudian, kita akan belajar bagaimana untuk menentukan bahagian mana imej yang dapat dilihat. background-position 0 0 object-position 50% 50% object-position Nilai memaksa imej untuk menyesuaikan diri sepenuhnya dengan kotak kandungannya, tetapi tidak diputarbelitkan. Imej itu mengekalkan nisbah aspek semulajadi sehingga tidak mengisi bekasnya:

object-fit: contain Lihat contoh SitePoint (@SitePoint) pada Codepen:

Objek-Fit: Mengandungi

contain

Nampaknya kita boleh mendapatkan hasil yang sama seperti di atas dengan hanya menetapkan

<code class="language-css">img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}</code>

pada imej. Tetapi itu tidak berlaku, kerana itu akan meletakkan imej ke kiri dan bukannya berpusat, yang merupakan tetapan lalai untuk

. Digabungkan dengan , , terdapat lebih banyak pilihan untuk bagaimana imej diposisikan dalam bekas.

height: 100% Sifat -sifat object-fit object-position membolehkan imej kekal dalam saiz semula jadi yang semula jadi. Hanya imej separa yang boleh menyesuaikan diri dengan kotak kandungan saiz yang boleh dilihat. object-fit

Lihat contoh SitePoint (@SitePoint) pada Codepen:

Object-Fit: none object-fit: none

Tidak seperti none, imej kami tidak terpaksa kelihatan sepenuhnya sepanjang sekurang -kurangnya satu paksi. Imej asal lebih luas dan lebih tinggi daripada kotak kandungan, jadi ia melimpah di kedua -dua arah, seperti yang ditunjukkan dalam imej berikut.

Nota sekali lagi bahawa pusat imej diselaraskan dengan pusat kotak kandungan secara lalai.

Juga ambil perhatian bahawa object-fit: none tidak bermakna object-fit tidak melakukan apa -apa. Seperti yang telah kita lihat, ia melakukan banyak perkara berbanding dengan tidak mempunyai object-fit yang ditetapkan sama sekali. (Sebagai peringatan, sila periksa keadaan selepas memadam object-fit: none dalam contoh di atas.)

object-fit: scale-down Atribut sama ada sama seperti

atau sama seperti

. Ia memilih scale-down untuk menyebabkan imej memaparkan hasil yang lebih kecil. none contain Lihat contoh SitePoint (@SitePoint) pada Codepen: Object-Fit: Scale-Down

Jelas sekali, dalam contoh semasa kami, ia akan memilih kerana bekas kami lebih kecil daripada

imej. Jika bekas kami

lebih besar daripada imej contain, maka akan menguasai dan imej akan mengekalkan saiz semulajadi dan bukannya mengisi bekas dalam satu arah, yang dapat anda lihat dalam demo codepen ini. none Jika kita menukar nilai

ke

dalam demo, ia seperti tidak ada tetapan object-fit: fill. Ini kerana, secara lalai, imej mengisi kotak kandungannya tidak kira apa saiz yang ditetapkan.

Lihat contoh SitePoint (@SitePoint) pada Codepen: object-fit Object-Fit: Isi fill object-fit

Kerana harta boleh mengubah bentuk imej, ia mungkin bukan pilihan terbaik dalam kebanyakan kes.

Gunakan tanpa kontena

fill Dalam contoh di atas, kami telah menggunakan

untuk mengubah saiz imej dalam bekas Div, tetapi prinsip yang kita lihat dalam amalan berfungsi sama sekali tanpa bekas itu. Apa yang penting ialah saiz kotak kandungan imej dan bagaimana imej dipaparkan dalam kotak kandungannya.

Contohnya, kita boleh menggunakan CSS berikut kepada imej tanpa sebarang div: object-fit Hasilnya ditunjukkan dalam demonstrasi codepen di bawah.

Lihat contoh SitePoint (@SitePoint) pada Codepen: object-fit Object-Fit: No Container

Cuba tukar nilai pada atribut

<code class="language-css">img {
  width: 100%;
  height: 100%;
}</code>

untuk menimpa, mengisi, mengecut, dan tidak ada contoh di atas untuk melihat tingkah laku setiap nilai. Hasilnya adalah sama dengan hasil imej yang ditetapkan hingga lebar dan ketinggian 100% dan dimasukkan ke dalam div set hingga 300px x 300px.

Digunakan dalam susun atur responsif

Sifat -sifat

object-fit mungkin paling berguna apabila saiz kawasan yang ditentukan imej bertindak balas terhadap saiz viewport penyemak imbas. Demonstrasi berikut memberikan imej kami ke kawasan grid yang fleksibel:

Lihat contoh SitePoint (@SitePoint) pada codepen: object-fit objek-sesuai di kawasan responsif

Sebagai kawasan viewport dan grid berkembang dan mengecut, nilai cover memastikan bahawa imej sentiasa menyesuaikan diri dengan sempurna ke kawasan gridnya, mengubah bahagian yang dapat dilihat dari imej supaya tidak mengganggu. (Lihat demo dalam paparan halaman penuh untuk hasil terbaik.)

Untuk mengetahui lebih lanjut mengenai kawasan grid, lihat Panduan Penyediaan Grid CSS kami.

Gunakan object-position Tetapkan kedudukan imej

Sama seperti menggunakan background-position untuk menetapkan kedudukan imej latar dalam bekasnya, atribut object-position mengawal kedudukan elemen imej dalam kotak kandungannya.

Seperti yang dapat kita lihat, nilai lalai object-position adalah 50% 50%, yang bermaksud bahawa pusat imej diselaraskan dengan pusat kotak kandungan pada paksi mendatar dan menegak. Kita boleh mengubahnya menggunakan satu siri nilai kata kunci (atas, bawah, kiri, kanan, tengah) atau menggunakan nilai panjang (seperti px, em, atau %) atau kedua -duanya.

Katakan kita kini mahu meletakkan imej kita dari sudut kanan bawah. Kita boleh menggunakan kata kunci right bottom atau nilai peratusan 100% 100%:

<code class="language-css">img {
  width: 100%;
  height: 100%;
}</code>

Lihat Contoh SitePoint (@SitePoint) pada codepen: Objek-posisi 1: Kata kunci

Imej berikut menggambarkan lokasi semasa imej kami.

Anda boleh menggunakan kata kunci penargetan dalam contoh di atas untuk melihat bagaimana ia berfungsi, serta kata kunci

, tetapi hasilnya harus mudah diramalkan. object-fit

kita juga boleh mengimbangi imej dari bekasnya menggunakan unit seperti piksel atau em. Contohnya:

Lihat contoh SitePoint (@SitePoint) pada Codepen:

<code class="language-css">img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}</code>

Objek-posisi 2: Unit

kita boleh membuat offset yang sama dari sudut kanan bawah dengan menggabungkan unit dan kata kunci, seperti yang ditunjukkan di bawah:

Lihat contoh SitePoint (@SitePoint) pada Codepen:

<code class="language-css">img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}</code>

Objek-posisi 3: Unit dan Kata Kunci

kita telah melihat bahawa kita boleh menggunakan peratusan untuk mencari imej dalam kotak kandungan. Seperti atribut

, menggunakan peratusan dengan

boleh sedikit mengelirukan. background-position 's object-position bermaksud bahawa pusat imej diselaraskan dengan pusat kotak kandungan pada paksi mendatar dan menegak. object-position 50% 50% Jika kita menetapkan

ke

, ini bermakna garis menegak pada 20% dari sebelah kiri imej bertepatan dengan garis menegak pada 20% dari sebelah kiri kotak kandungan, dan mendatar garis pada 40% daripada bahagian atas imej bertepatan dengan garis mendatar pada 40% daripada bahagian atas kotak kandungan, seperti yang ditunjukkan dalam gambar di bawah. object-position 20% 40%

kita dapat melihat ini dalam demo Codepen di bawah.

Lihat Contoh SitePoint (@SitePoint) pada Codepen: Objek-posisi 4: Peratusan

Kesimpulan

Atribut

object-fit bertujuan untuk digunakan dengan mana -mana jenis elemen penggantian, seperti imej, video, iframes, dan objek tertanam. Betapa berguna untuk menyesuaikan unsur -unsur seperti video ke kawasan yang ditakrifkan di mana beberapa elemen mungkin tersembunyi mungkin merupakan soalan yang akan dibincangkan, tetapi tidak ada keraguan bahawa terdapat kes -kes penggunaan yang berdaya maju. Pilihan yang lebih baik mungkin adalah untuk menetapkan lebar iframe ke width: 100% ruang bebas dan kemudian gunakan harta aspect-ratio untuk mengekalkan perkadarannya.

Keadaan yang lebih biasa adalah keperluan untuk menyesuaikan imej ke ruang tertentu, jadi object-fit sangat berguna untuk membolehkan imej menyesuaikan diri dengan ruang tanpa herotan (walaupun sebahagian daripada imej mesti tersembunyi).

Untuk mengetahui lebih lanjut mengenai object-fit dan object-position, lihat halaman MDN untuk sifat -sifat ini:

• [objek-fit] (pautan perlu diganti dengan pautan objek MDN)
• [objek-posisi] (pautan perlu diganti dengan pautan objek objek MDN)

Akhirnya, seperti yang disebutkan di atas, ia bernilai membandingkan sifat object-fit dan object-position dengan sifat background-size dan background-position, yang mempunyai banyak persamaan. Lihat cara menggunakan CSS background-size dan background-position untuk mengetahui tentangnya.

FAQs (FAQs) mengenai CSS object-fit object-position dan sifat

Apakah perbezaan antara object-fit object-position dan

dalam CSS?

Ciri -ciri object-fit dan object-position dalam object-fit CSS digunakan untuk mengawal kandungan elemen penggantian, seperti imej atau video. Atribut background-size mentakrifkan bagaimana elemen bertindak balas terhadap ketinggian dan lebar kotak kandungannya. Ia sama dengan fill dalam CSS, tetapi berfungsi dengan elemen penggantian. Ia mempunyai lima nilai: contain, cover, none, scale-down,

, dan

. object-position Sebaliknya, atribut background-position menentukan di mana elemen penggantian berada di dalam kotaknya. Ia sama dengan

, tetapi berfungsi dengan elemen pengganti. Ia mengambil dua nilai untuk mewakili koordinat X dan Y, yang menetapkan kedudukan elemen.

object-fit bagaimana menggunakan atribut

untuk mengubah saiz imej?

Sifat -sifat object-fit

boleh digunakan untuk mengawal bagaimana imej harus diubah saiznya sesuai dengan bekasnya. Berikut adalah contoh:

<code class="language-css">img {
  width: 100%;
  height: 100%;
}</code>

Dalam contoh ini, imej akan diubah saiz untuk menutup seluruh lebar dan ketinggian bekasnya sambil mengekalkan nisbah aspeknya. Jika nisbah aspek imej tidak sepadan dengan nisbah aspek bekas, imej akan dipotong.

Bolehkah saya menggunakan object-position dengan imej latar belakang?

tidak, object-position atribut tidak boleh digunakan dengan imej latar belakang. Ia hanya berfungsi dengan elemen pengganti seperti img, video atau embed. Untuk imej latar belakang, anda boleh menggunakan atribut background-position sebaliknya.

Bagaimanakah kerja nilai

object-fit contain?

Nilai

object-fit harta contain saiz semula kandungan agar sesuai dengan kotak kandungan sambil mengekalkan nisbah aspeknya. Jika nisbah aspeknya tidak sepadan dengan nisbah aspek kandungan, keseluruhan kandungan akan dapat dilihat, tetapi masih terdapat beberapa ruang dalam kotak kandungan.

Apakah fungsi nilai

object-fit? none Nilai atribut

bermakna bahawa kandungan akan mengabaikan ketinggian dan lebar kotak kandungan. Ia akan mengekalkan saiz asalnya, yang boleh menyebabkan kandungan dipotong jika ia lebih besar daripada kotak kandungan. object-fit none bagaimana menggunakan

gambar pusat?

object-position anda boleh menggunakan harta

untuk memusatkan imej dalam kotak kandungannya. Berikut adalah contoh:

object-position

Dalam contoh ini, imej akan terletak di tengah kotak kandungannya.

<code class="language-css">img {
  width: 100%;
  height: 100%;
}</code>

Bolehkah saya menggunakan nilai peratusan dalam

?

object-position Ya, anda boleh menggunakan nilai peratusan dalam atribut

. Nilai -nilai ini menunjukkan lokasi kandungan relatif kepada kotak kandungan. Sebagai contoh,

terletak kandungan di sudut kiri atas kotak kandungan, manakala object-position mengesannya di sudut kanan bawah. 0% 0% 100% 100% Apa yang berlaku jika saya tidak menentukan nilai

?

object-position Jika anda tidak menentukan nilai

, nilai lalai adalah

, yang akan memusatkan kandungan dalam kotak kandungannya. object-position 50% 50% Bolehkah saya menggunakan

dan

pada masa yang sama? object-fit object-position Ya, anda boleh menggunakan sifat

dan

untuk mengawal saiz dan kedudukan kandungan. Berikut adalah contoh: object-fit object-position

Dalam contoh ini, imej akan diubah saiz untuk menimpa kotak kandungannya dan memusatkannya.

<code class="language-css">img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}</code>

Semua penyemak imbas menyokong sifat

dan

? object-fit object-position Semua penyemak imbas moden, termasuk Chrome, Firefox, Safari, dan Edge, menyokong sifat

dan

secara meluas. Walau bagaimanapun, Internet Explorer tidak menyokong mereka. object-fit object-position Pautan codepen dalam semua contoh kod perlu digantikan dengan pautan sebenar. Sila ambil perhatian bahawa artikel ini telah ditulis semula dan digilap untuk memenuhi keperluan pseudo-asal, sambil mengekalkan semua maklumat dan gambar teks asal.

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