`object-fit` dan `object-position` Properties

Articles

Artikel ini menerangkan mengenai object-fit dan object-position properties.

Anda boleh belajar cara mengatur objek seperti imej dan video serta cara menulisnya dalam CSS.

YouTube Video

HTML untuk Pratonton

css-object-fit-position.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-object-fit-position.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Object</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Object Fit And Object Position Properties</h2>
 20        </header>
 21        <article>
 22            <h3>object-fit</h3>
 23            <section style="width: 100%; height: 300px;">
 24                <header><h4>object-fit: fill</h4></header>
 25                <section class="sample-view" style="width: 100px; height: 100px;">
 26                    <img class="object-fit-fill" src="example.jpg" alt="Example Image">
 27                </section>
 28                <header><h4>object-fit: contain</h4></header>
 29                <section class="sample-view" style="width: 100px; height: 100px;">
 30                    <img class="object-fit-contain" src="example.jpg" alt="Example Image">
 31                </section>
 32                <header><h4>object-fit: cover</h4></header>
 33                <section class="sample-view" style="width: 100px; height: 100px;">
 34                    <img class="object-fit-cover" src="example.jpg" alt="Example Image">
 35                </section>
 36                <header><h4>object-fit: none</h4></header>
 37                <section class="sample-view" style="width: 100px; height: 100px;">
 38                    <img class="object-fit-none" src="example.jpg" alt="Example Image">
 39                </section>
 40                <header><h4>object-fit: scale-down</h4></header>
 41                <section class="sample-view" style="width: 100px; height: 100px;">
 42                    <img class="object-fit-scale-down" src="example.jpg" alt="Example Image">
 43                </section>
 44            </section>
 45        </article>
 46        <article>
 47            <h3>object-fit : cover</h3>
 48            <section>
 49                <header><h4>CSS</h4></header>
 50<pre class="sample">
 51.background-image-cover img {
 52    width: 100%;
 53    height: 100%;
 54    object-fit: cover;
 55}
 56</pre>
 57                <header><h4>HTML</h4></header>
 58<pre>
 59&lt;div class=&quot;background-image-cover&quot;&gt;
 60    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 61&lt;/div&gt;
 62</pre>
 63                <header><h4>HTML+CSS</h4></header>
 64                <section class="sample-view">
 65                    <div class="image-container-cover">
 66                        <img src="example.jpg" alt="Example Image">
 67                    </div>
 68                </section>
 69            </section>
 70        </article>
 71        <article>
 72            <h3>object-fit : contain</h3>
 73            <section>
 74                <header><h4>CSS</h4></header>
 75<pre class="sample">
 76.background-image-contain img {
 77    width: 100%;
 78    height: 100%;
 79    object-fit: contain;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;div class=&quot;background-image-contain&quot;&gt;
 85    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 86&lt;/div&gt;
 87</pre>
 88                <header><h4>HTML+CSS</h4></header>
 89                <section class="sample-view">
 90                    <div class="image-container-contain">
 91                        <img src="example.jpg" alt="Example Image">
 92                    </div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>object-fit Common Mistake Example</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101.image-container-invalid {
102    width: 100%;
103    height: auto;
104    /* height: 500px; The height of the parent element is not specified */
105}
106
107.image-container-invalid img {
108    object-fit: cover;
109}
110</pre>
111                <header><h4>HTML</h4></header>
112<pre>
113&lt;div class=&quot;background-image-invalid&quot;&gt;
114    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
115&lt;/div&gt;
116</pre>
117                <header><h4>HTML+CSS</h4></header>
118                <section class="sample-view">
119                    <div class="image-container-invalid">
120                        <img src="example.jpg" alt="Example Image">
121                    </div>
122                </section>
123            </section>
124        </article>
125        <article>
126            <h3>object-position</h3>
127            <section style="width: 100%; height: 200px;">
128                <header><h4>object-fit: cover; object-position: center;</h4></header>
129                <section class="sample-view" style="width: 100px; height: 100px;">
130                    <img class="object-position-center" src="example.jpg" alt="Example Image">
131                </section>
132                <header><h4>object-position: 50% 50%</h4></header>
133                <section class="sample-view" style="width: 100px; height: 100px;">
134                    <img class="object-position-50-50" src="example.jpg" alt="Example Image">
135                </section>
136                <header><h4>object-position: left top</h4></header>
137                <section class="sample-view" style="width: 100px; height: 100px;">
138                    <img class="object-position-left-top" src="example.jpg" alt="Example Image">
139                </section>
140                <header><h4>object-position: right 50%</h4></header>
141                <section class="sample-view" style="width: 100px; height: 100px;">
142                    <img class="object-position-right-50" src="example.jpg" alt="Example Image">
143                </section>
144                <header><h4>object-fit: cover; object-position: bottom right;</h4></header>
145                <section class="sample-view" style="width: 100px; height: 100px;">
146                    <img class="object-position-bottom-right" src="example.jpg" alt="Example Image">
147                </section>
148                <header><h4>object-fit: contain; object-position: top;</h4></header>
149                <section class="sample-view" style="width: 100px; height: 100px;">
150                    <img class="object-position-top" src="example.jpg" alt="Example Image">
151                </section>
152                <header><h4>object-fit: cover; object-position: 25% 75%;</h4></header>
153                <section class="sample-view" style="width: 100px; height: 100px;">
154                    <img class="object-position-25-75" src="example.jpg" alt="Example Image">
155                </section>
156                <header><h4>object-fit: cover; object-position: center top;</h4></header>
157                <section class="sample-view" style="width: 100px; height: 100px;">
158                    <img class="object-position-center-top" src="example.jpg" alt="Example Image">
159                </section>
160            </section>
161        </article>
162    </main>
163</body>
164</html>

Berkaitan dengan Penyesuaian Objek

Ciri `object-fit`

Ciri object-fit dalam CSS digunakan terutamanya untuk mengawal bagaimana imej, video, dan kandungan lain sesuai dalam elemen kontainer mereka. Dengan menggunakan ciri ini, anda boleh menetapkan bagaimana elemen-elemen tertentu diubah saiznya dan diposisikan dengan estetik. Ia sangat berguna untuk menyesuaikan paparan imej atau video dengan memotong atau mengubah saiz jika tidak sesuai dalam elemen induk.

Nilai `object-fit`

`fill` (Nilai Asas)

1img {
2  object-fit: fill;
3}

fill adalah nilai asas, di mana imej atau video dipaksa meregang untuk memenuhi lebar dan tinggi elemen induk sepenuhnya. Dalam kes ini, nisbah aspek asal akan diabaikan, yang mungkin menyebabkan herotan imej.

Ia memenuhi saiz elemen induk sepenuhnya.
Disebabkan nisbah aspek diabaikan, imej atau video mungkin diregang secara menegak atau melintang.

`contain`

1img {
2  object-fit: contain;
3}

contain mengubah saiz kandungan supaya ia sesuai sepenuhnya dalam elemen induk sambil mengekalkan nisbah aspek. Ia tidak melebihi saiz elemen induk, dan mungkin terdapat padding sama ada di sisi menegak atau melintang.

Keseluruhan kandungan dipaparkan.
Untuk mengekalkan nisbah aspek asal, padding (kesan letterbox atau pillarbox) mungkin muncul.

`cover`

1img {
2  object-fit: cover;
3}

cover mengubah saiz kandungan untuk menutupi elemen induk sepenuhnya sambil mengekalkan nisbah aspek. Beberapa kandungan mungkin dipotong untuk sesuai dengan elemen induk, tetapi keseluruhan elemen memenuhi kontainer, jadi tiada jurang berlaku.

Kandungan menutupi elemen induk sepenuhnya.
Ia mungkin dipotong sambil mengekalkan nisbah aspek asal.
Biasanya digunakan untuk imej latar atau imej bahagian utama.

`none`

1img {
2  object-fit: none;
3}

none memaparkan imej atau video dalam saiz asal dan nisbah aspek asal mereka. Ia tidak menyesuaikan diri untuk muat ke saiz elemen induk, dan kandungan akan melimpah jika diperlukan.

Saiz asal kandungan dikekalkan.
Tiada pengubahan saiz dilakukan untuk memuatkan kandungan ke dalam elemen induk.

`scale-down`

1img {
2  object-fit: scale-down;
3}

scale-down adalah nilai yang menggabungkan kelakuan none dan contain. Jika kandungan sesuai dengan elemen induk, ia bertindak seperti none, tetapi jika kandungan terlalu besar, ia menggunakan kelakuan contain dan dikecilkan untuk muat.

Kandungan dikecilkan jika ia lebih besar daripada elemen induk.
Ia dipaparkan dalam saiz asalnya jika ia lebih kecil.

Contoh Penggunaan

Menyesuaikan Imej Latar kepada Elemen Induk

Sebagai contoh, untuk menyebarkan imej merentasi keseluruhan skrin dengan reka bentuk responsif dalam fikiran, adalah biasa untuk menggunakan cover. Kod berikut adalah contoh bagaimana memuatkan imej dengan rapat ke dalam elemen induk, walaupun ia dipotong.

 1<div class="background-image">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.background-image img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: cover;
10}
11</style>

Dalam kes ini, imej sepenuhnya meliputi elemen induk, mengekalkan susun atur yang cantik pada apa-apa saiz skrin. Jika nisbah aspek berbeza, beberapa bahagian imej mungkin tidak kelihatan, tetapi ia mencapai persembahan yang sesuai dengan reka bentuk.

Memaparkan imej sambil mengekalkan nisbah aspek

Seterusnya, jika anda ingin memuatkan keseluruhan imej ke dalam elemen induk sambil mengekalkan nisbah aspeknya, contain adalah sesuai.

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: contain;
10}
11</style>

Dalam contoh ini, imej dikecilkan untuk muat ke dalam bekas, menghasilkan sedikit ruang kosong, tetapi imej asal dipaparkan tanpa gangguan.

Kesalahan biasa

Kesalahan biasa semasa menggunakan object-fit adalah tidak menetapkan saiz elemen induk. object-fit adalah sifat untuk memuatkan kandungan ke dalam elemen induk, jadi jika saiz elemen induk tidak jelas, kesan yang diharapkan tidak dapat dicapai. Pastikan elemen induk mempunyai width atau height yang ditetapkan dengan betul.

Sebagai contoh, dalam kod berikut, ketinggian elemen induk tidak dinyatakan, jadi object-fit tidak berfungsi seperti yang diinginkan.

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container {
 7  width: 100%;
 8  /* height: 500px; the parent element's height is not specified */
 9}
10
11.image-container img {
12  object-fit: cover;
13}
14</style>

Dalam kes ini, anda perlu menetapkan ketinggian elemen induk atau melaraskan keseluruhan susun atur menggunakan flexbox atau grid layout.

Situasi di mana `object-fit` harus digunakan

object-fit adalah penting, terutamanya dalam reka bentuk responsif dan laman web yang memenuhi pelbagai saiz skrin. Sebagai contoh, ia berguna dalam situasi berikut:.

Apabila anda ingin menyesuaikan imej atau video untuk dipaparkan dengan betul pada peranti yang berbeza
Apabila anda ingin memaparkan imej latar atau sejenisnya dalam skrin penuh sambil membolehkan pemotongan
Apabila anda ingin memuatkan imej ke dalam elemen ibu sambil mengekalkan nisbah aspeknya
Apabila anda ingin memaparkan saiz imej dengan konsisten, seperti dalam galeri

Menggunakan object-fit dalam situasi ini boleh mengekalkan konsistensi reka bentuk dan meningkatkan pengalaman pengguna.

Ringkasan

object-fit ialah sifat CSS yang kuat yang membolehkan anda mengawal secara fleksibel bagaimana imej dan video dipaparkan berbanding elemen induk mereka pada halaman web. Dengan menggunakan nilai yang berbeza seperti fill, contain, cover, none, dan scale-down, anda boleh memenuhi pelbagai keperluan reka bentuk. Dengan memahami cara menggunakannya dengan betul dan menerapkannya dengan tepat, anda boleh mencapai susun atur yang menarik secara visual.

Kuasi penggunaan object-fit untuk mencipta reka bentuk yang responsif dan menarik secara estetik.

Sifat `object-position`

Sifat CSS object-position digunakan untuk mengawal kedudukan kandungan seperti imej dan video dalam elemen. Dengan menggunakan object-position, anda boleh meletakkan kandungan pada titik tertentu dan memberikan kesan visual yang sesuai dengan susun atur.

Gambaran Keseluruhan `object-position`

object-position terutamanya digunakan pada elemen media seperti tag <img> dan <video>. Sifat ini mengawal tempat media dipaparkan dalam bekasnya. object-fit sering digunakan bersama-sama dengan object-position, di mana object-fit menetapkan cara imej atau video sesuai dengan saiz bingkai, dan object-position melaraskan kedudukan paparan kandungan.

1img {
2    object-fit: cover;
3    object-position: center;
4}

Dalam contoh ini, imej dikecilkan untuk sesuai dengan bekas (object-fit: cover), dan diletakkan supaya pusatnya dipaparkan (object-position: center).

Cara Menentukan Nilai

object-position ditentukan dengan dua nilai seperti berikut.

Kedudukan Mendatar (Paksi-X)
Kedudukan Menegak (Paksi-Y)

Format Penentuan Nilai

Dalam object-position, anda boleh menentukan nilai dalam format berikut.

Kata kunci: atas, kanan, bawah, kiri, tengah
Peratusan: 0% hingga 100%
Unit panjang: px, em, rem, dll.

Sebagai contoh, anda boleh menggunakannya seperti ini.

1img {
2    object-position: 50% 50%; /* Center the image */
3}
4
5video {
6    object-position: left top; /* Align to the top left */
7}

Gabungan Kata Kunci dan Peratusan

Anda juga boleh mencampurkan kata kunci dan peratusan.

1img {
2    object-position: right 50%;
3}

Dalam contoh ini, imej diletakkan di tepi kanan, dan di tengah secara menegak pada 50%. Gabungan ini sangat berguna apabila kedudukan yang fleksibel diperlukan.

Gabungan dengan `object-fit`

object-position selalunya digunakan bersama dengan object-fit. object-fit menentukan bagaimana imej atau video dilaraskan saiznya berbanding rangkanya. Sebagai contoh, menggunakan object-fit: cover memotong imej untuk muat ke dalam rangka dan meletakkannya mengikut object-position yang ditentukan.

1img {
2    object-fit: cover;
3    object-position: bottom right;
4}

Dalam contoh ini, imej merebak ke seluruh bekas, memaparkan bahagian bawah kanan kandungan.

Contoh Gabungan dengan Nilai `object-fit`

fill: Imej mungkin terherot, tetapi ia muat ke seluruh bekas.
contain: Seluruh imej dipaparkan sambil mengekalkan nisbah aspek.
cover: Dipotong untuk muat ke dalam bekas, sambil mengekalkan nisbah aspek.
none: Imej dipaparkan pada saiz asalnya.

1img {
2    object-fit: contain;
3    object-position: top;
4}

Dalam tetapan ini, imej diletakkan di bahagian atas bekas, dan seluruh imej dipaparkan.

Penggunaan Lanjutan

object-position boleh digunakan dalam pelbagai senario bukan sahaja untuk pelarasan kedudukan mudah tetapi juga untuk meningkatkan kesan visual.

Menekankan Bahagian Tertentu Imej

Ia berguna apabila anda ingin menumpukan pada bahagian tertentu imej daripada memaparkan keseluruhan imej. Tetapkan object-fit kepada cover dan gunakan object-position untuk menumpukan pada kawasan tertentu.

1img {
2    object-fit: cover;
3    object-position: 25% 75%;
4}

Dalam contoh ini, bahagian bawah kiri imej dipaparkan, menekankan bahagian penting.

Apabila Menggunakan Video sebagai Latar Belakang

object-position juga berguna apabila menggunakan video sebagai latar belakang. Anda boleh meletakkan video pada lokasi tertentu untuk mengekalkan konsistensi dengan reka bentuk keseluruhan halaman.

1video {
2    object-fit: cover;
3    object-position: center top;
4}

Dalam tetapan ini, video memenuhi keseluruhan halaman dan diletakkan di bahagian tengah atas.

Masalah Biasa dan Penyelesaiannya

Mungkin terdapat beberapa masalah apabila menggunakan object-position. Di sini, kami memperkenalkan masalah biasa dan penyelesaiannya.

Sebahagian imej terpotong

Apabila menggunakan object-fit: cover, imej mungkin akan dipotong untuk muat dalam bekas. Dalam kes ini, dengan melaraskan kedudukan paparan menggunakan object-position, anda boleh memastikan bahagian penting ditunjukkan.

1img {
2    object-fit: cover;
3    object-position: center;
4}

Kedudukan imej tidak seperti yang dijangkakan

Spesifikasi peratusan mungkin tidak selalu intuitif. Adalah perlu untuk mempertimbangkan saiz bekas dan nisbah aspek serta mencuba dengan nilai yang berbeza. Menggunakan alat pembangun untuk melaraskan dalam masa nyata adalah berkesan.

Ringkasan

object-position adalah alat yang kuat untuk meletakkan elemen media dengan bebas. Dengan menggabungkannya dengan object-fit, susun atur fleksibel yang disesuaikan dengan reka bentuk boleh dicapai. Kuasi kata kunci, peratusan, dan unit panjang untuk memaksimumkan kesan visual dalam pelbagai situasi.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

`overflow` dan `contain` Properti

`object-fit` dan `object-position` Properties

YouTube Video

HTML untuk Pratonton

Berkaitan dengan Penyesuaian Objek

Ciri object-fit

Nilai object-fit

fill (Nilai Asas)

contain

cover

none

scale-down

Contoh Penggunaan

Menyesuaikan Imej Latar kepada Elemen Induk

Memaparkan imej sambil mengekalkan nisbah aspek

Kesalahan biasa

Situasi di mana object-fit harus digunakan

Ringkasan

Sifat object-position

Gambaran Keseluruhan object-position

Cara Menentukan Nilai

Format Penentuan Nilai

Gabungan Kata Kunci dan Peratusan

Gabungan dengan object-fit

Contoh Gabungan dengan Nilai object-fit

Penggunaan Lanjutan

Menekankan Bahagian Tertentu Imej

Apabila Menggunakan Video sebagai Latar Belakang

Masalah Biasa dan Penyelesaiannya

Sebahagian imej terpotong

Kedudukan imej tidak seperti yang dijangkakan

Ringkasan

YouTube Video

Ciri `object-fit`

Nilai `object-fit`

`fill` (Nilai Asas)

`contain`

`cover`

`none`

`scale-down`

Situasi di mana `object-fit` harus digunakan

Sifat `object-position`

Gambaran Keseluruhan `object-position`

Gabungan dengan `object-fit`

Contoh Gabungan dengan Nilai `object-fit`