Lompat ke konten Lompat ke sidebar Lompat ke footer

objectFit Style HTML DOM dan Fungsinya

Properti Style objectFit DOM pada HTML digunakan untuk mengatur atau mengembalikan bagaimana sebuah gambar atau elemen video ukurannya mengalami perubahan untuk dicocokkan dengan container.

7 Value Properti objectFit Style DOM pada HTML
Properti objectFit Style DOM

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 [klik], Mengatur Panjang Minimal HTML Menggunakan minHeight Style DOM [klik], dan Mengatur Lebar Maksimal HTML Menggunakan maxWidth Style DOM [klik].

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.

Baca Juga:

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>

 

<

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


Artikel ini didedikasikan kepada: Chisbiya Umi Latifa, Daffa Agnis Putra, Dahlia Kusuma Ramadhani Dewi Suryani, Davin Finanda Firzi Pradhani, dan Dea Septiana.

5 komentar untuk "objectFit Style HTML DOM dan Fungsinya"

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

    BalasHapus
    Balasan
    1. 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. Apa yang dimaksud dengan properti objectFit Style DOM pada HTML?

    BalasHapus
    Balasan
    1. 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. 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 -
- Big things start from small things -