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</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>

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: 500px; 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.

Kuasi penggunaan object-fit untuk menciptakan desain yang responsif dan estetis.

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.

1img {
2    object-fit: cover;
3    object-position: center;
4}
  • Dalam contoh ini, gambar diubah ukurannya agar sesuai dengan wadah (object-fit: cover), dan diposisikan sehingga bagian tengahnya ditampilkan (object-position: center).

Cara Menentukan Nilai

object-position ditentukan dengan dua nilai sebagai berikut.

  • Posisi horizontal (sumbu X)
  • Posisi vertikal (sumbu Y)
Format Spesifikasi Nilai

Dalam object-position, Anda dapat menentukan nilai dalam format berikut.

  • Kata kunci: top, right, bottom, left, center
  • Persentase: 0% hingga 100%
  • Satuan panjang: px, em, rem, dll.

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: bottom right;
4}
  • Dalam contoh ini, gambar menyebar ke seluruh wadah, menampilkan bagian kanan bawah dari konten.
Contoh Kombinasi dengan Nilai 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.
1img {
2    object-fit: contain;
3    object-position: top;
4}

Dalam pengaturan ini, gambar ditempatkan di atas wadah, dan seluruh gambar 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`