Articles
Pengenalan kepada CSS
`object-fit` dan `object-position` Properties

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

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 : fill</h3>
 23            <section>
 24                <header><h4>CSS</h4></header>
 25<pre class="sample">
 26.container-fill img {
 27    width: 100%;
 28    height: 100%;
 29    object-fit: fill;
 30}
 31</pre>
 32                <header><h4>HTML</h4></header>
 33<pre>
 34&lt;div class=&quot;container-fill&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
 35    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 36&lt;/div&gt;
 37</pre>
 38                <header><h4>HTML+CSS</h4></header>
 39                <section class="sample-view">
 40                    <div class="container-fill" style="width: 150px; height: 100px;">
 41                        <img src="example.jpg" alt="Example Image">
 42                    </div>
 43                </section>
 44            </section>
 45        </article>
 46        <article>
 47            <h3>object-fit : contain</h3>
 48            <section>
 49                <header><h4>CSS</h4></header>
 50<pre class="sample">
 51.container-contain img {
 52    width: 100%;
 53    height: 100%;
 54    object-fit: contain;
 55}
 56</pre>
 57                <header><h4>HTML</h4></header>
 58<pre>
 59&lt;div class=&quot;container-contain&quot; style=&quot;width: 150px; height: 100px;&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="container-contain" style="width: 150px; height: 100px;">
 66                        <img src="example.jpg" alt="Example Image">
 67                    </div>
 68                </section>
 69            </section>
 70        </article>
 71        <article>
 72            <h3>object-fit : cover</h3>
 73            <section>
 74                <header><h4>CSS</h4></header>
 75<pre class="sample">
 76.container-cover img {
 77    width: 100%;
 78    height: 100%;
 79    object-fit: cover;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;div class=&quot;container-cover&quot; style=&quot;width: 150px; height: 100px;&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="container-cover" style="width: 150px; height: 100px;">
 91                        <img src="example.jpg" alt="Example Image">
 92                    </div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>object-fit : none</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101.container-none img {
102    width: 100%;
103    height: 100%;
104    object-fit: none;
105}
106</pre>
107                <header><h4>HTML</h4></header>
108<pre>
109&lt;div class=&quot;container-none&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
110    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
111&lt;/div&gt;
112</pre>
113                <header><h4>HTML+CSS</h4></header>
114                <section class="sample-view">
115                    <div class="container-none" style="width: 150px; height: 100px;">
116                        <img src="example.jpg" alt="Example Image">
117                    </div>
118                </section>
119            </section>
120        </article>
121        <article>
122            <h3>object-fit : scale-down</h3>
123            <section>
124                <header><h4>CSS</h4></header>
125<pre class="sample">
126.container-scale-down img {
127    width: 100%;
128    height: 100%;
129    object-fit: scale-down;
130}
131</pre>
132                <header><h4>HTML</h4></header>
133<pre>
134&lt;div class=&quot;container-scale-down&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
135    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
136&lt;/div&gt;
137</pre>
138                <header><h4>HTML+CSS</h4></header>
139                <section class="sample-view">
140                    <div class="container-scale-down" style="width: 150px; height: 100px;">
141                        <img src="example.jpg" alt="Example Image">
142                    </div>
143                </section>
144            </section>
145        </article>
146        <article>
147            <h3>object-fit : Example(Cover)</h3>
148            <section>
149                <header><h4>CSS</h4></header>
150<pre class="sample">
151.container-example-cover img {
152  width: 100%;
153  height: 100%;
154  object-fit: cover;
155}
156</pre>
157                <header><h4>HTML</h4></header>
158<pre>
159&lt;div class=&quot;container-example-cover&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
160    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
161&lt;/div&gt;
162</pre>
163                <header><h4>HTML+CSS</h4></header>
164                <section class="sample-view">
165                    <div class="container-example-cover" style="width: 150px; height: 100px;">
166                        <img src="example.jpg" alt="Example Image">
167                    </div>
168                </section>
169            </section>
170        </article>
171        <article>
172            <h3>object-fit : Example(Contain)</h3>
173            <section>
174                <header><h4>CSS</h4></header>
175<pre class="sample">
176.container-example-contain img {
177  width: 100%;
178  height: 100%;
179  object-fit: contain;
180}
181</pre>
182                <header><h4>HTML</h4></header>
183<pre>
184&lt;div class=&quot;container-example-contain&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
185    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
186&lt;/div&gt;
187</pre>
188                <header><h4>HTML+CSS</h4></header>
189                <section class="sample-view">
190                    <div class="container-example-contain" style="width: 150px; height: 100px;">
191                        <img src="example.jpg" alt="Example Image">
192                    </div>
193                </section>
194            </section>
195        </article>
196        <article>
197            <h3>object-fit Common Mistake Example</h3>
198            <section>
199                <header><h4>CSS</h4></header>
200<pre class="sample">
201.container-invalid {
202    width: 100px;
203    height: auto;
204    /* height: 150px; The height of the parent element is not specified */
205}
206
207.container-invalid img {
208    object-fit: cover;
209}
210</pre>
211                <header><h4>HTML</h4></header>
212<pre>
213&lt;div class=&quot;background-image-invalid&quot;&gt;
214    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
215&lt;/div&gt;
216</pre>
217                <header><h4>HTML+CSS</h4></header>
218                <section class="sample-view">
219                    <div class="container-invalid">
220                        <img src="example.jpg" alt="Example Image">
221                    </div>
222                </section>
223            </section>
224        </article>
225        <article>
226            <h3>object-position : one value</h3>
227            <section>
228                <header><h4>object-position: center;</h4></header>
229                <section class="sample-view" style="width: 550px; height: 250px;">
230                    <img class="object-position-center" src="example.jpg" alt="Example Image">
231                </section>
232                <header><h4>object-position: left;</h4></header>
233                <section class="sample-view" style="width: 550px; height: 250px;">
234                    <img class="object-position-left" src="example.jpg" alt="Example Image">
235                </section>
236                <header><h4>object-position: 70%;</h4></header>
237                <section class="sample-view" style="width: 550px; height: 250px;">
238                    <img class="object-position-70" src="example.jpg" alt="Example Image">
239                </section>
240                <header><h4>object-position: 50px;</h4></header>
241                <section class="sample-view" style="width: 550px; height: 250px;">
242                    <img class="object-position-50px" src="example.jpg" alt="Example Image">
243                </section>
244            </section>
245        </article>
246        <article>
247            <h3>object-position : two values</h3>
248            <section>
249                <header><h4>object-position: center center</h4></header>
250                <section class="sample-view" style="width: 550px; height: 250px;">
251                    <img class="object-position-center-center" src="example.jpg" alt="Example Image">
252                </section>
253                <header><h4>object-position: right top</h4></header>
254                <section class="sample-view" style="width: 550px; height: 250px;">
255                    <img class="object-position-right-top" src="example.jpg" alt="Example Image">
256                </section>
257                <header><h4>object-position: 75% 20%</h4></header>
258                <section class="sample-view" style="width: 550px; height: 250px;">
259                    <img class="object-position-75-20" src="example.jpg" alt="Example Image">
260                </section>
261                <header><h4>object-position: 50px 25px</h4></header>
262                <section class="sample-view" style="width: 550px; height: 250px;">
263                    <img class="object-position-50px-25px" src="example.jpg" alt="Example Image">
264                </section>
265            </section>
266        </article>
267        <article>
268            <h3>object-position: four values</h3>
269            <section>
270                <header><h4>object-position: left 10px top 20px</h4></header>
271                <section class="sample-view" style="width: 550px; height: 250px;">
272                    <img class="object-position-left-10-top-20" src="example.jpg" alt="Example Image">
273                </section>
274                <header><h4>object-position: right 15% bottom 30px</h4></header>
275                <section class="sample-view" style="width: 550px; height: 250px;">
276                    <img class="object-position-right-15-bottom-30" src="example.jpg" alt="Example Image">
277                </section>
278            </section>
279        </article>
280        <article>
281            <h3>object-position: mixed values</h3>
282            <section>
283                <header><h4>object-position: right 50%</h4></header>
284                <section class="sample-view" style="width: 550px; height: 250px;">
285                    <img class="object-position-right-50" src="example.jpg" alt="Example Image">
286                </section>
287            </section>
288        </article>
289        <article>
290            <h3>object-position and object-fit</h3>
291            <section>
292                <header><h4>object-fit: cover; object-position: right bottom;</h4></header>
293                <section class="sample-view" style="width: 550px; height: 250px;">
294                    <img class="object-position-right-bottom" src="example.jpg" alt="Example Image">
295                </section>
296                <header><h4>object-fit: contain; object-position: right;</h4></header>
297                <section class="sample-view" style="width: 550px; height: 250px;">
298                    <img class="object-position-right" src="example.jpg" alt="Example Image">
299                </section>
300            </section>
301        </article>
302    </main>
303</body>
304</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: 150px; 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.

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.

Cara Menentukan Nilai

object-position boleh menentukan kedudukan dengan menggunakan satu, dua, atau empat nilai. Namun, penetapan empat nilai mungkin tidak disokong oleh pelayar lama.

Menetapkan Satu Nilai

Jika hanya satu nilai dinyatakan, ia dianggap sebagai kedudukan mendatar (paksi-X), dan kedudukan menegak (paksi-Y) akan ditetapkan secara automatik ke center.

  • Apabila ditetapkan sebagai object-position: left;, objek diletakkan di sebelah kiri.
  • Apabila ditetapkan sebagai object-position: 70%;, objek diletakkan 70% secara mendatar dan berada di tengah secara menegak.
  • Apabila ditetapkan sebagai object-position: 50px;, objek diletakkan 50px dari kiri dan berada di tengah secara menegak.

Menetapkan Dua Nilai

Menetapkan dua nilai membolehkan anda menetapkan kedudukan mendatar (paksi-X) dan menegak (paksi-Y) secara individu.

  • Apabila ditetapkan sebagai object-position: center center;, objek akan berada di tengah.
  • Apabila ditetapkan sebagai object-position: right top;, objek diletakkan di bahagian kanan atas.
  • Apabila ditetapkan sebagai object-position: 75% 20%;, objek diletakkan pada 75% secara mendatar dan 20% secara menegak.
  • Apabila ditetapkan sebagai object-position: 50px 25px;, objek diletakkan 50px dari kiri dan 25px dari atas.

Menetapkan Empat Nilai

Dengan menetapkan empat nilai, anda boleh memberikan kedudukan yang lebih terperinci menggunakan kata kunci seperti left atau top bersama dengan nilai offsetnya.

1object-position: <horizontal-keyword> <horizontal-offset> <vertical-keyword> <vertical-offset>;
  • Apabila ditetapkan sebagai object-position: left 10px top 20px;, objek diletakkan 10px dari kiri dan 20px dari atas.
  • Apabila ditetapkan sebagai object-position: right 15% bottom 30px;, objek diletakkan 15% dari kanan dan 30px dari bawah.
Format Penentuan Nilai

object-position boleh menerima format nilai berikut.

  • Anda boleh menetapkan kata kunci seperti top, right, bottom, left, dan center.
  • Anda juga boleh menetapkan nilai menggunakan peratusan seperti 50% atau unit seperti px.

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: right bottom;
4}
  • Dalam contoh ini, imej merebak ke seluruh bekas, memaparkan bahagian bawah kanan kandungan.
Contoh Gabungan dengan Nilai object-fit

Anda boleh menetapkan nilai berikut untuk 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.

Sebagai contoh, penggunaan object-fit: contain akan memaparkan keseluruhan imej dan meletakkannya mengikut tetapan object-position.

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

Dengan tetapan ini, imej akan diletakkan di sebelah kanan bekas dan keseluruhan imej akan 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` PropertiCSS sifat berkaitan dengan ketelusan