Articles
Pengenalan ke CSS
`object-fit` dan Properti `object-position`

`object-fit` dan Properti `object-position`

Artikel ini menjelaskan properti object-fit dan object-position.

Anda dapat belajar cara mengatur objek seperti gambar dan video serta cara menuliskannya di CSS.

YouTube Video

HTML untuk Pratinjau

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>

Terkait Penyesuaian Objek

Properti object-fit

Properti CSS object-fit digunakan terutama untuk mengontrol bagaimana gambar, video, dan konten lainnya sesuai dengan elemen container mereka. Dengan menggunakan properti ini, Anda dapat dengan fleksibel menentukan bagaimana elemen yang ditentukan diubah ukurannya dan diposisikan secara estetis. Ini sangat berguna untuk menyesuaikan tampilan gambar atau video dengan memotong atau mengubah ukuran ketika mereka tidak sesuai dalam elemen induk.

Nilai object-fit

fill (Nilai Default) 
1img {
2  object-fit: fill;
3}

fill adalah nilai default, di mana gambar atau video dipaksa untuk direntangkan hingga sepenuhnya sesuai dengan lebar dan tinggi elemen induk. Dalam kasus ini, rasio aspek asli diabaikan, yang dapat menyebabkan distorsi gambar.

  • Ini sepenuhnya sesuai dengan ukuran elemen induk.
  • Karena rasio aspek diabaikan, gambar atau video mungkin direntangkan secara vertikal atau horizontal.
contain 
1img {
2  object-fit: contain;
3}

contain mengubah ukuran konten sehingga sepenuhnya sesuai dengan elemen induk sambil mempertahankan rasio aspek. Ini tidak melebihi ukuran elemen induk, dan mungkin ada padding pada sisi vertikal atau horizontal.

  • Seluruh konten ditampilkan.
  • Untuk mempertahankan rasio aspek asli, padding (efek letterbox atau pillarbox) mungkin muncul.
cover 
1img {
2  object-fit: cover;
3}

cover mengubah ukuran konten untuk sepenuhnya menutupi elemen induk sambil mempertahankan rasio aspek. Beberapa konten mungkin dipangkas untuk sesuai dengan elemen induk, tetapi seluruh elemen memenuhi container, sehingga tidak ada celah.

  • Konten sepenuhnya menutupi elemen induk.
  • Dapat dipotong sambil mempertahankan rasio aspek asli.
  • Umumnya digunakan untuk gambar latar belakang atau gambar bagian hero.
none 
1img {
2  object-fit: none;
3}

none menampilkan gambar atau video dalam ukuran dan rasio aspek aslinya. Konten tidak menyesuaikan dengan ukuran elemen induk, dan akan meluap jika diperlukan.

  • Ukuran asli konten dipertahankan.
  • Tidak ada pengubahan ukuran yang dilakukan agar konten sesuai dengan elemen induk.
scale-down 
1img {
2  object-fit: scale-down;
3}

scale-down adalah nilai yang menggabungkan perilaku none dan contain. Jika konten sesuai dengan elemen induk, perilakunya seperti none, tetapi jika kontennya terlalu besar, perilakunya seperti contain dan diperkecil agar sesuai.

  • Konten akan diperkecil jika ukurannya lebih besar dari elemen induk.
  • Akan ditampilkan dalam ukuran aslinya jika lebih kecil.

Contoh Penggunaan

Menyesuaikan Gambar Latar dengan Elemen Induk

Sebagai contoh, untuk menyebarkan gambar ke seluruh layar dengan mempertimbangkan desain responsif, biasanya digunakan cover. Kode berikut adalah contoh menyesuaikan gambar dengan erat ke elemen induk, meskipun harus 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 kasus ini, gambar sepenuhnya menutupi elemen induk, menjaga tata letak yang indah di berbagai ukuran layar. Jika rasio aspeknya berbeda, beberapa bagian gambar mungkin tidak terlihat, tetapi ini memberikan presentasi yang sesuai dengan desain.

Menampilkan gambar sambil mempertahankan rasio aspek

Selanjutnya, jika Anda ingin menyesuaikan seluruh gambar ke elemen induk sambil mempertahankan rasio aspeknya, contain adalah pilihan yang tepat.

 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, gambar diperkecil agar sesuai dengan wadah, menghasilkan beberapa ruang kosong, tetapi gambar aslinya ditampilkan tanpa distorsi.

Kesalahan umum

Kesalahan umum saat menggunakan object-fit adalah tidak menetapkan ukuran elemen induk. object-fit adalah properti untuk menyesuaikan konten dengan elemen induk, jadi jika ukuran elemen induk tidak jelas, efek yang diharapkan tidak dapat dicapai. Pastikan elemen induk memiliki width atau height yang ditetapkan dengan benar.

Sebagai contoh, dalam kode berikut, tinggi elemen induk tidak ditentukan, sehingga object-fit tidak berfungsi sebagaimana mestinya.

 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 kasus ini, Anda perlu menentukan tinggi elemen induk atau menyesuaikan tata letak keseluruhan menggunakan flexbox atau grid layout.

Situasi di mana object-fit harus digunakan

object-fit penting, terutama dalam desain responsif dan situs web yang melayani berbagai ukuran layar. Misalnya, ini berguna dalam kasus berikut:.

  • Ketika Anda ingin menyesuaikan gambar atau video agar tampil dengan benar di perangkat yang berbeda
  • Ketika Anda ingin menampilkan gambar latar atau sejenisnya dalam layar penuh sambil memungkinkan pemotongan
  • Ketika Anda ingin menyesuaikan gambar ke dalam elemen induk sambil mempertahankan rasio aspeknya
  • Ketika Anda ingin menampilkan ukuran gambar secara konsisten, seperti dalam galeri

Menggunakan object-fit dalam situasi ini dapat mempertahankan konsistensi desain dan meningkatkan pengalaman pengguna.

Ringkasan

object-fit adalah properti CSS yang kuat yang memungkinkan Anda mengontrol secara fleksibel bagaimana gambar dan video ditampilkan relatif terhadap elemen induk mereka di halaman web. Dengan menggunakan nilai yang berbeda seperti fill, contain, cover, none, dan scale-down, Anda dapat memenuhi berbagai kebutuhan desain. Dengan memahami cara menggunakannya dengan benar dan menerapkannya secara tepat, Anda dapat menciptakan tata letak yang menarik secara visual.

Properti object-position

Properti CSS object-position digunakan untuk mengontrol posisi konten seperti gambar dan video di dalam sebuah elemen. Dengan menggunakan object-position, Anda dapat memposisikan konten pada titik tertentu dan memberikan efek visual yang sesuai dengan tata letak.

Gambaran umum object-position

object-position terutama diterapkan pada elemen media seperti tag <img> dan <video>. Properti ini mengontrol di mana media ditampilkan dalam wadahnya. object-fit sering digunakan bersama dengan object-position, di mana object-fit mengatur bagaimana gambar atau video sesuai dengan ukuran bingkai, dan object-position menyesuaikan posisi tampilan konten.

Cara Menentukan Nilai

object-position dapat menentukan posisi menggunakan satu, dua, atau empat nilai. Namun, penentuan empat nilai mungkin tidak didukung oleh browser yang lebih lama.

Menentukan Satu Nilai

Jika hanya satu nilai yang ditentukan, nilai tersebut dianggap sebagai posisi horizontal (sumbu-X), dan sumbu vertikal (sumbu-Y) secara otomatis diatur ke center.

  • Jika ditentukan sebagai object-position: left;, objek akan diposisikan di sebelah kiri.
  • Jika ditentukan sebagai object-position: 70%;, objek akan diposisikan secara horizontal pada 70% dan secara vertikal di tengah.
  • Jika ditentukan sebagai object-position: 50px;, objek akan diposisikan 50px dari kiri dan secara vertikal di tengah.

Menentukan Dua Nilai

Menentukan dua nilai memungkinkan Anda mengatur posisi horizontal (sumbu-X) dan vertikal (sumbu-Y) secara terpisah.

  • Jika ditentukan sebagai object-position: center center;, objek akan ditempatkan di tengah.
  • Jika ditentukan sebagai object-position: right top;, objek akan diposisikan di kanan atas.
  • Jika ditentukan sebagai object-position: 75% 20%;, objek akan diposisikan secara horizontal pada 75% dan secara vertikal pada 20%.
  • Jika ditentukan sebagai object-position: 50px 25px;, objek akan diposisikan 50px dari kiri dan 25px dari atas.

Menentukan Empat Nilai

Dengan menentukan empat nilai, Anda dapat memberikan posisi yang lebih detail menggunakan kata kunci seperti left atau top beserta offsetnya.

1object-position: <horizontal-keyword> <horizontal-offset> <vertical-keyword> <vertical-offset>;
  • Jika ditentukan sebagai object-position: left 10px top 20px;, objek akan diposisikan 10px dari kiri dan 20px dari atas.
  • Jika ditentukan sebagai object-position: right 15% bottom 30px;, objek akan diposisikan 15% dari kanan dan 30px dari bawah.
Format Spesifikasi Nilai

object-position dapat menerima format nilai sebagai berikut.

  • Anda dapat menentukan kata kunci seperti top, right, bottom, left, dan center.
  • Anda juga dapat menentukan nilai menggunakan persentase seperti 50% atau satuan seperti px.

Sebagai contoh, Anda dapat 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}
Kombinasi Kata Kunci dan Persentase

Dimungkinkan juga untuk mencampur kata kunci dan persentase.

1img {
2    object-position: right 50%;
3}
  • Dalam contoh ini, gambar ditempatkan di tepi kanan dan diposisikan secara vertikal pada 50%. Kombinasi ini sangat berguna saat dibutuhkan posisi yang fleksibel.

Kombinasi dengan object-fit

object-position sering digunakan bersama dengan object-fit. object-fit menentukan bagaimana sebuah gambar atau video diubah ukurannya relatif terhadap bingkainya. Misalnya, menggunakan object-fit: cover memotong gambar agar sesuai dengan bingkai dan memposisikannya sesuai dengan object-position yang ditentukan.

1img {
2    object-fit: cover;
3    object-position: right bottom;
4}
  • Dalam contoh ini, gambar menyebar ke seluruh wadah, menampilkan bagian kanan bawah dari konten.
Contoh Kombinasi dengan Nilai object-fit

Anda dapat menentukan nilai berikut untuk object-fit.

  • fill: Gambar mungkin akan terdistorsi, tetapi sesuai dengan seluruh wadah.
  • contain: Seluruh gambar ditampilkan dengan tetap mempertahankan rasio aspeknya.
  • cover: Dipotong agar sesuai dengan wadah, sambil tetap mempertahankan rasio aspek.
  • none: Gambar ditampilkan dalam ukuran aslinya.

Sebagai contoh, dengan menggunakan object-fit: contain gambar akan ditampilkan seluruhnya dan diposisikan sesuai pengaturan object-position.

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

Dengan pengaturan ini, gambar akan ditempatkan di sisi kanan wadah dan seluruh gambar akan ditampilkan.

Penggunaan Tingkat Lanjut

object-position dapat diterapkan dalam berbagai skenario tidak hanya untuk penyesuaian posisi sederhana tetapi juga untuk meningkatkan efek visual.

Menonjolkan Bagian Tertentu dari Gambar

Ini berguna ketika Anda ingin fokus pada bagian tertentu dari gambar daripada menampilkan seluruh gambar. Atur object-fit ke cover dan gunakan object-position untuk fokus pada area tertentu.

1img {
2    object-fit: cover;
3    object-position: 25% 75%;
4}
  • Dalam contoh ini, bagian kiri bawah gambar ditampilkan, menonjolkan bagian penting.
Saat Menggunakan Video sebagai Latar Belakang

object-position juga berguna saat menggunakan video sebagai latar belakang. Anda dapat memposisikan video di lokasi tertentu untuk menjaga konsistensi dengan desain keseluruhan halaman.

1video {
2    object-fit: cover;
3    object-position: center top;
4}
  • Dalam pengaturan ini, video memenuhi seluruh halaman dan diposisikan di bagian tengah atas.

Masalah Umum dan Solusinya

Mungkin ada beberapa masalah saat menggunakan object-position. Di sini, kami memperkenalkan masalah umum dan solusinya.

Bagian dari gambar terpotong

Saat menggunakan object-fit: cover, gambar mungkin terpotong untuk menyesuaikan dengan wadah. Dalam kasus ini, dengan menyesuaikan posisi tampilan menggunakan object-position, Anda dapat memastikan bagian penting terlihat.

1img {
2    object-fit: cover;
3    object-position: center;
4}
Posisi gambar tidak sesuai dengan yang diharapkan

Spesifikasi persentase mungkin tidak selalu intuitif. Penting untuk mempertimbangkan ukuran dan rasio aspek wadah serta mencoba berbagai nilai. Menggunakan alat pengembang untuk menyesuaikan secara real-time sangat efektif.

Ringkasan

object-position adalah alat yang kuat untuk memposisikan elemen media secara bebas. Dengan menggabungkannya dengan object-fit, tata letak fleksibel yang disesuaikan dengan desain dapat dicapai. Kuasi kata kunci, persentase, dan satuan panjang untuk memaksimalkan efek visual dalam berbagai situasi.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

`overflow` dan properti `contain`Properti CSS yang terkait dengan transparansi