Bagaimanakah saya menggunakan objek CSS dan kedudukan objek untuk mengawal bagaimana imej dipaparkan?

Bagaimanakah saya menggunakan objek CSS dan kedudukan objek untuk mengawal bagaimana imej dipaparkan?

CSS menyediakan sifat-sifat object-fit dan object-position untuk mengawal bagaimana imej atau elemen yang diganti lain (seperti video) dipaparkan di dalam kotak yang mengandungi mereka. Ciri -ciri ini amat berguna apabila dimensi imej tidak sepadan dengan dimensi bekasnya.

• Objek-Fit : Harta ini menentukan bagaimana kandungan elemen yang diganti harus diubah saiznya sesuai dengan bekasnya. Ia mengawal nisbah aspek dan skala kandungan.
• Posisi Objek : Harta ini menentukan penjajaran kandungan elemen yang digantikan dalam bekas selepas ia telah diubah saiz mengikut harta object-fit .

Untuk menggunakan sifat -sifat ini, anda hanya memohon kepada peraturan CSS anda yang mensasarkan elemen imej. Inilah contoh:

 <code class="css">img { width: 300px; height: 200px; object-fit: cover; object-position: center; }</code>

Dalam contoh ini, imej akan diubah saiznya sesuai dengan kotak 300x200 piksel sambil mengekalkan nisbah aspeknya ( object-fit: cover ). Kandungan imej akan berpusat di dalam kotak ini ( object-position: center ).

Apakah nilai yang berbeza untuk Fit Object dan bagaimana ia mempengaruhi paparan imej?

Harta object-fit boleh mengambil beberapa nilai, masing-masing mempengaruhi bagaimana imej dipaparkan dalam bekasnya:

• Isi : Ini adalah nilai lalai. Imej itu diregangkan untuk mengisi kotak kandungan, yang boleh memutarbelitkan nisbah aspek.
• Mengandungi : Imej diperkuatkan untuk mengekalkan nisbah aspeknya semasa pemasangan dalam kotak kandungan. Ini bermakna imej tidak boleh mengisi keseluruhan kotak jika nisbah aspeknya berbeza daripada bekas.
• Cover : Imej diperkuatkan untuk mengekalkan nisbah aspeknya semasa mengisi kotak kandungan keseluruhan. Ini boleh menyebabkan menanam imej jika nisbah aspek tidak sepadan.
• Tiada : Imej tidak diubahsuai sama sekali, dan dipaparkan pada saiz intrinsiknya. Jika imej lebih besar daripada bekas, ia akan melimpah.
• Skala-bawah : Imej bersaiz seolah-olah none atau contain ditentukan, yang mana akan menghasilkan saiz objek konkrit yang lebih kecil.

Setiap nilai ini memberikan cara yang berbeza untuk menguruskan bagaimana imej dibentangkan, bergantung kepada keperluan reka bentuk anda.

Bolehkah kedudukan objek digunakan untuk menyelaraskan imej dalam bekas mereka, dan jika ya, bagaimana?

Ya, object-position boleh digunakan untuk menyelaraskan imej dalam bekas mereka selepas mereka telah diubah suai dengan object-fit . Harta object-position mengambil satu atau dua nilai yang menentukan koordinat x dan y untuk meletakkan imej.

Sintaks untuk object-position adalah serupa dengan harta background-position . Berikut adalah beberapa contoh bagaimana anda boleh menggunakannya:

• Untuk memusatkan gambar:

   <code class="css">img { object-position: center; }</code>

  Salin selepas log masuk

• Untuk meletakkan imej di sebelah kanan atas:

   <code class="css">img { object-position: right top; }</code>

  Salin selepas log masuk

• Untuk meletakkan imej dengan koordinat yang tepat:

   <code class="css">img { object-position: 20% 50%; }</code>

  Salin selepas log masuk

Ini membolehkan anda mengawal penempatan imej yang tepat di dalam bekasnya, terutamanya berguna apabila menggunakan object-fit: cover atau contain untuk menguruskan saiz imej.

Bagaimanakah saya dapat memastikan bahawa imej mengekalkan nisbah aspek mereka menggunakan Objek-Fit?

Untuk memastikan bahawa imej mengekalkan nisbah aspek mereka, anda harus menggunakan harta benda object-fit dengan sama ada contain , cover , none , atau nilai scale-down . Berikut adalah cara masing -masing membantu mengekalkan nisbah aspek:

• Mengandungi : Ini skala imej ke saiz terbesar sedemikian rupa sehingga kedua -dua lebar dan ketinggiannya sesuai dalam kotak kandungan. Nisbah aspek imej dipelihara, dan ia tidak boleh mengisi keseluruhan kotak.
• Cover : Ini skala imej ke saiz terkecil sedemikian rupa sehingga kedua -dua lebar dan ketinggiannya dapat menutupi kotak kandungan sepenuhnya. Nisbah aspek imej dipelihara, tetapi bahagian imej mungkin dipotong.
• Tiada : Imej dipaparkan pada saiz intrinsiknya. Ia tidak akan diubahsuai, dengan itu mengekalkan nisbah aspek asalnya.
• Skala-bawah : Ini bertindak seperti none atau contain , yang mana akan menghasilkan saiz yang lebih kecil atau sama. Ia memastikan bahawa nisbah aspek dikekalkan sementara juga berpotensi mengurangkan saiz imej agar sesuai dengan bekas.

Menggunakan mana -mana nilai ini kecuali fill akan membantu memastikan imej mengekalkan nisbah aspeknya semasa pemasangan atau mengisi bekasnya.

Atas ialah kandungan terperinci Bagaimanakah saya menggunakan objek CSS dan kedudukan objek untuk mengawal bagaimana imej dipaparkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!