Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

objectFit Style HTML DOM dan Fungsinya

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti Style objectFit DOM pada HTML digunakan untuk mengatur atau mengembalikan bagaimana sebuah gambar atau elemen video ukurannya mengalami perubahan untuk dicocokkan dengan container.

Sebelum memahami lebih dalam materi tentang objectFit Style HTML DOM dan Fungsinya, terlebih dahulu pelajari materi tentang: Mengatur Lebar Minimal HTML Menggunakan minWidth Style DOM, Mengatur Panjang Minimal HTML Menggunakan minHeight Style DOM, dan Mengatur Lebar Maksimal HTML Menggunakan maxWidth Style DOM.

Sintak:
  • Digunakan untuk mengembalikan nilai properti objectFit: object.style.objectFit
  • Digunakan untuk mengatur nilai properti objectFit: object.style.objectFit = "contain|cover|scale-down|none|fill|initial|inherit"

Return Values: Digunakan untuk mengembalikan nilai sebuah string yang merepresentasikan elemen object-fit.

Property Values:
  • contain: Konten yang diganti kemudian diskalakan untuk mempertahankan rasio aspeknya,  sekaligus menyesuaikan kotak dari konten
  • cover: Konten yang diganti ukurannya yang digunakan untuk mempertahankan rasio aspeknya sambil mengisi seluruh kotak konten elemen. Objek dapat dipotong agar sesuai dengan kotak konten jika diperlukan.
  • scale-down: Gambar yang diganti diubah ukurannya seolah-olah tidak ada atau tidak berisi, yang skalanya telah ditentukan, dan hasilnya menjadi ukuran objek terkecil.
  • none: Konten yang diganti tidak diubah ukurannya.
  • fill: Konten diubah ukurannya untuk mengisi kotak konten elemen. Nilai ini merupakan nilai default dari properti.
  • initial: Digunakan untuk mengatur nilai properti ke nilai default-nya.
  • inherit: Digunakan untuk menerima nilai turunan properti dari nilai parent.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style objectFit DOM

</title>

 

<style>

#content 

{

border: solid;

height: 250px;

width: 400px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style objectFit DOM

</b>

 

<p>

<img 

src=

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyizkhCmvzS6vbSN5BKe5vmhs_cFakFxB8u_E3U3_OXNRz-QJy4CemqcTyPrvzfOofiws4FHtSerLDrlYP6ygRUH4rpC3dtrozkB9Dz-_5cQIuYGT3KaiF4YRD8zcz2u92zmlOZRMfNlVBTylRfL-TMTFlvrd5wCxJvm3FXsIulLr40WStkBfdMO3d/s800/blogmapel.webp"

id="content" />

</p>

 

<button 

onclick="setObjectFit()">

Change objectFit

</button>

 

<!-- Script untuk mengatur 

nilai objectFit menjadi 

contain -->

<script>

function setObjectFit() 

{

elem = document.querySelector('#content');

elem.style.objectFit = 'contain';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style objectFit DOM



Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style objectFit DOM

</title>

 

<style>

#content 

{

border: solid;

height: 250px;

width: 400px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style objectFit DOM

</b>

 

<p>

<img 

src= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyizkhCmvzS6vbSN5BKe5vmhs_cFakFxB8u_E3U3_OXNRz-QJy4CemqcTyPrvzfOofiws4FHtSerLDrlYP6ygRUH4rpC3dtrozkB9Dz-_5cQIuYGT3KaiF4YRD8zcz2u92zmlOZRMfNlVBTylRfL-TMTFlvrd5wCxJvm3FXsIulLr40WStkBfdMO3d/s800/blogmapel.webp"

id="content" />

</p>

 

<button 

onclick="setObjectFit()">

Change objectFit

</button>

 

<!-- Script untuk mengatur 

nilai objectFit menjadi cover 

-->

<script>

function setObjectFit() 

{

elem = document.querySelector('#content');

elem.style.objectFit = 'cover';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style objectFit DOM



Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style objectFit DOM

</title>

 

<style>

#content 

{

border: solid;

height: 250px;

width: 400px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style objectFit DOM

</b>

 

<p>

<img 

src=

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyizkhCmvzS6vbSN5BKe5vmhs_cFakFxB8u_E3U3_OXNRz-QJy4CemqcTyPrvzfOofiws4FHtSerLDrlYP6ygRUH4rpC3dtrozkB9Dz-_5cQIuYGT3KaiF4YRD8zcz2u92zmlOZRMfNlVBTylRfL-TMTFlvrd5wCxJvm3FXsIulLr40WStkBfdMO3d/s800/blogmapel.webp"

id="content" />

</p>

 

<button 

onclick="setObjectFit()">

Change objectFit

</button>

 

<!-- Script untuk mengatur 

properti objectFit menjadi 

scale-down -->

<script>

function setObjectFit() 

{

elem = document.querySelector('#content');

elem.style.objectFit = 'scale-down';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style objectFit DOM



Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style objectFit DOM

</title>

 

<style>

#content 

{

border: solid;

height: 250px;

width: 400px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style objectFit DOM

</b>

 

<p>

<img 

src=

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyizkhCmvzS6vbSN5BKe5vmhs_cFakFxB8u_E3U3_OXNRz-QJy4CemqcTyPrvzfOofiws4FHtSerLDrlYP6ygRUH4rpC3dtrozkB9Dz-_5cQIuYGT3KaiF4YRD8zcz2u92zmlOZRMfNlVBTylRfL-TMTFlvrd5wCxJvm3FXsIulLr40WStkBfdMO3d/s800/blogmapel.webp"

id="content" />

</p>

 

<button 

onclick="setObjectFit()">

Change objectFit

</button>

 

<!-- Script untuk mengatur 

properti objectFit menjadi 

none -->

<script>

function setObjectFit() 

{

elem = document.querySelector('#content');

elem.style.objectFit = 'none';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style objectFit DOM



Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style objectFit DOM

</title>

 

<style>

#content 

{

border: solid;

height: 250px;

width: 400px;

object-fit: scale-down;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style objectFit DOM

</b>

 

<p>

<img 

src=

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyizkhCmvzS6vbSN5BKe5vmhs_cFakFxB8u_E3U3_OXNRz-QJy4CemqcTyPrvzfOofiws4FHtSerLDrlYP6ygRUH4rpC3dtrozkB9Dz-_5cQIuYGT3KaiF4YRD8zcz2u92zmlOZRMfNlVBTylRfL-TMTFlvrd5wCxJvm3FXsIulLr40WStkBfdMO3d/s800/blogmapel.webp"

id="content" />

</p>

 

<button 

onclick="setObjectFit()">

Change objectFit

</button>

 

<!-- Script untuk mengatur 

properti objectFit menjadi 

fill -->

<script>

function setObjectFit() 

{

elem = document.querySelector('#content');

elem.style.objectFit = 'fill';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style objectFit DOM



Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style objectFit DOM

</title>

 

<style>

#content 

{

border: solid;

height: 250px;

width: 400px;

object-fit: scale-down;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style objectFit DOM

</b>

 

<p>

<img 

src=

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyizkhCmvzS6vbSN5BKe5vmhs_cFakFxB8u_E3U3_OXNRz-QJy4CemqcTyPrvzfOofiws4FHtSerLDrlYP6ygRUH4rpC3dtrozkB9Dz-_5cQIuYGT3KaiF4YRD8zcz2u92zmlOZRMfNlVBTylRfL-TMTFlvrd5wCxJvm3FXsIulLr40WStkBfdMO3d/s800/blogmapel.webp"

id="content" />

</p>

 

<button 

onclick="setObjectFit()">

Change objectFit

</button>

 

<!-- Script untuk mengatur 

nilai properti objectFit 

menjadi initial -->

<script>

function setObjectFit() 

{

elem = document.querySelector('#content');

elem.style.objectFit = 'initial';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style objectFit DOM



Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style objectFit DOM

</title>

 

<style>

#parent 

{object-fit: contain;}

 

#content 

{

border: solid;

height: 250px;

width: 400px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style objectFit DOM

</b>

 

<p 

id="parent">

 

<img 

src=

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyizkhCmvzS6vbSN5BKe5vmhs_cFakFxB8u_E3U3_OXNRz-QJy4CemqcTyPrvzfOofiws4FHtSerLDrlYP6ygRUH4rpC3dtrozkB9Dz-_5cQIuYGT3KaiF4YRD8zcz2u92zmlOZRMfNlVBTylRfL-TMTFlvrd5wCxJvm3FXsIulLr40WStkBfdMO3d/s800/blogmapel.webp"

id="content" />

 

</p>

 

<button 

onclick="setObjectFit()">

Change objectFit

</button>

 

<!-- Script untuk mengatur 

nilai properti objectFit 

menjadi inherit -->

<script>

function setObjectFit() 

{

elem = document.querySelector('#content');

elem.style.objectFit = 'inherit';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style objectFit DOM



Pada dunia pengembangan web, tampilan media seperti gambar dan video memegang peranan penting dalam membangun desain antarmuka pengguna yang menarik. Salah satu cara untuk mengatur bagaimana media ini ditampilkan dalam elemen HTML adalah dengan menggunakan properti gaya CSS yang bernama objectFit. Properti ini memungkinkan pengaturan tata letak gambar atau elemen media lainnya agar sesuai dengan ukuran elemen pembungkusnya, tanpa mengubah aspek rasio media yang bersangkutan. Hal ini memberi fleksibilitas besar bagi pengembang untuk menyesuaikan media dengan berbagai ukuran elemen tanpa merusak tampilan atau kualitas media tersebut.

Secara umum, objectFit digunakan untuk memanipulasi bagaimana gambar atau media lainnya diatur dalam kotak pembungkusnya. Sebagai contoh, ketika sebuah gambar dimasukkan ke dalam elemen pembungkus dengan ukuran tertentu, bisa jadi gambar tersebut memiliki rasio yang berbeda dengan ukuran elemen pembungkusnya. Dalam hal ini, gambar bisa jadi terlihat terdistorsi atau terpotong. Dengan menggunakan properti objectFit, pengembang dapat mengendalikan bagaimana gambar tersebut ditampilkan agar sesuai dengan kotak pembungkusnya.

Ada beberapa nilai yang dapat diterapkan pada properti objectFit yang masing-masing memberikan hasil yang berbeda dalam pengaturan tampilan media tersebut. Nilai pertama yang sering digunakan adalah contain. Ketika properti objectFit diatur dengan nilai ini, gambar atau media akan disesuaikan ukurannya agar seluruhnya terlihat dalam kotak pembungkus, tanpa memotong bagian apapun. Akan tetapi, jika rasio gambar berbeda dengan ukuran kotak pembungkus, ruang kosong akan muncul di sekitar gambar. Meskipun demikian, gambar tetap akan terlihat utuh dengan rasio aslinya.

Selain nilai contain, ada juga nilai cover yang sering digunakan untuk membuat gambar atau media menutupi seluruh area kotak pembungkus. Ketika properti objectFit diberi nilai ini, gambar akan diperbesar atau diperkecil hingga menutupi seluruh kotak pembungkus, namun tanpa mengubah rasio gambar. Hal ini mungkin menyebabkan sebagian gambar terpotong, terutama jika rasio gambar tidak sesuai dengan rasio kotak pembungkus. Meskipun ada potongan, seluruh area kotak pembungkus akan tertutupi oleh gambar, sehingga menciptakan tampilan yang seragam.

Nilai lainnya adalah fill. Dengan mengatur objectFit ke nilai ini, gambar atau media akan mengisi seluruh area kotak pembungkus dengan distorsi. Artinya, gambar akan dipaksa untuk menyesuaikan dengan ukuran kotak pembungkus tanpa mempertahankan rasio aslinya. Akibatnya, gambar atau media tersebut bisa terlihat terdistorsi, karena bentuknya disesuaikan dengan ukuran kotak pembungkus yang mungkin memiliki rasio yang berbeda. Nilai ini sering digunakan ketika tidak terlalu memperhatikan bentuk asli gambar, dan lebih mementingkan pengisian penuh kotak pembungkus.

Selain tiga nilai yang disebutkan sebelumnya, ada juga nilai none yang digunakan untuk mengatur gambar atau media agar tidak diubah ukurannya sama sekali. Ketika properti objectFit diberikan nilai none, gambar atau media akan ditampilkan dalam ukuran aslinya, tanpa penyesuaian ukuran terhadap kotak pembungkus. Hal ini bisa membuat gambar terlihat terpotong jika ukuran kotak pembungkus lebih kecil dari gambar aslinya. Biasanya, nilai ini digunakan ketika pengembang ingin mempertahankan ukuran asli gambar atau media, tanpa memperhatikan ukuran kotak pembungkus.

Selanjutnya, ada nilai scale-down yang mirip dengan contain, tetapi dengan sedikit perbedaan. Jika gambar lebih besar dari kotak pembungkus, maka gambar akan diperkecil hingga sesuai dengan ukuran kotak. Namun, jika gambar lebih kecil dari kotak pembungkus, gambar akan ditampilkan dengan ukuran aslinya. Nilai ini berguna dalam situasi dimana pengembang ingin memastikan gambar tidak akan diperbesar, tetapi tetap ingin menyesuaikan ukuran gambar jika gambar lebih besar dari area yang tersedia.

Penerapan properti objectFit sangat berguna dalam desain web responsif, dimana elemen-elemen media harus menyesuaikan diri dengan berbagai ukuran layar perangkat. Dalam desain web modern, sangat penting bagi pengembang untuk memastikan tampilan media seperti gambar dan video dapat terlihat baik pada berbagai ukuran perangkat. Oleh karena itu, penggunaan objectFit dalam CSS memungkinkan pengaturan tata letak media yang lebih dinamis dan responsif.

Misalnya, dalam pembuatan desain galeri gambar, objectFit bisa digunakan untuk memastikan gambar-gambar tersebut tampil dengan baik pada berbagai ukuran layar. Jika digunakan nilai contain, maka semua gambar akan ditampilkan utuh, namun ruang kosong mungkin muncul di sekitar gambar jika ukuran gambar berbeda dengan ukuran kotak pembungkusnya. Jika digunakan nilai cover, gambar akan mengisi seluruh area kotak pembungkus tanpa mengubah rasio gambar, tetapi mungkin akan ada potongan pada gambar.

Penerapan objectFit juga sering terlihat pada elemen media seperti video. Video yang dimasukkan ke dalam kotak pembungkus bisa menggunakan properti ini agar tampilan video menyesuaikan dengan ukuran elemen pembungkusnya. Dengan menggunakan nilai contain atau cover, pengembang dapat memastikan video tampil dengan baik tanpa mengubah rasio asli atau tanpa menampilkan bagian video yang terpotong.

Dalam prakteknya, penggunaan objectFit sangat bergantung pada desain visual yang ingin dicapai oleh pengembang. Pemilihan nilai yang tepat untuk properti ini akan sangat bergantung pada tujuan tampilan dan jenis media yang digunakan. Jika tujuan desain adalah untuk memastikan seluruh gambar atau video terlihat tanpa ada yang terpotong, maka nilai contain bisa menjadi pilihan yang tepat. Namun, jika tujuan desain adalah untuk memastikan kotak pembungkus terisi penuh dengan gambar atau video, nilai cover akan lebih sesuai.

Penting untuk dicatat bahwa penggunaan objectFit juga memperhitungkan bagaimana gambar dan media berinteraksi dengan elemen pembungkusnya dalam konteks tata letak halaman. Sebagai contoh, elemen pembungkus yang memiliki dimensi tetap, seperti kotak dengan lebar dan tinggi yang telah ditentukan, akan mempengaruhi cara gambar atau media ditampilkan ketika properti objectFit diterapkan. Jika elemen pembungkus tersebut memiliki ukuran yang lebih kecil dari gambar atau media, maka penggunaan nilai contain atau cover akan sangat berpengaruh pada hasil tampilan akhir. Sebaliknya, jika elemen pembungkus memiliki ukuran yang lebih besar dari gambar atau media, maka penggunaan nilai contain akan menampilkan gambar dengan ruang kosong di sekitar gambar, sedangkan cover akan memastikan gambar tetap menutupi seluruh area pembungkus.

Kesimpulannya, properti objectFit dalam HTML DOM adalah alat yang sangat berguna dalam pengaturan tampilan media dalam elemen pembungkus. Dengan memberikan pengembang kemampuan untuk menyesuaikan gambar dan video dengan berbagai ukuran elemen pembungkus, objectFit membantu menciptakan desain web yang responsif dan estetis. Pemilihan nilai yang tepat untuk properti ini akan sangat bergantung pada tujuan desain dan jenis media yang digunakan. Dengan memahami berbagai nilai yang tersedia dan bagaimana penerapannya memengaruhi tampilan media, pengembang dapat menciptakan desain web yang lebih fleksibel dan menarik.

Artikel ini akan dibaca oleh: Chisbiya Umi Latifa, Daffa Agnis Putra, Dahlia Kusuma Ramadhani Dewi Suryani, Davin Finanda Firzi Pradhani, dan Dea Septiana.
Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "objectFit Style HTML DOM dan Fungsinya"

  1. AnonimSenin, 18 Juli 2022 pukul 19.19.00 WIB

    Jenis browser apa saja yang dapat digunakan oleh seorang pengembang untuk mengaktifkan properti objectFit Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimSenin, 18 Juli 2022 pukul 19.20.00 WIB

      Berikut adalah beberapa jenis browser populer yang dapat digunakan oleh seorang pengembang untuk mengaktifkan properti objectFit Style DOM pada HTML:
      1. Google Chrome 31.0
      2. Internet Explorer 16.0
      3. Firefox 36.0
      4. Opera 19.0
      5. Apple Safari 7.1

      Hapus
  2. AnonimRabu, 10 Agustus 2022 pukul 18.26.00 WIB

    Apa yang dimaksud dengan properti objectFit Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimRabu, 10 Agustus 2022 pukul 18.26.00 WIB

      Properti objectFit Style DOM pada HTML merupakan properti yang digunakan untuk menentukan bagaimana tag IMG dan tag VIDEO harus diubah ukurannya agar sesuai dengan container-nya.

      Hapus
    2. AnonimRabu, 10 Agustus 2022 pukul 18.26.00 WIB

      Properti objectFit Style DOM pada HTML akan memberi tahu konten untuk mengisi container dengan beberapa cara, seperti "preserve tah aspect ratio" atau stretch up and take up as much space as possible".

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -