DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

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.

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:


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

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


Komentar

  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

Posting Komentar

Hubungi admin melalui Wa : +62-896-2514-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 ~

Postingan populer dari blog ini (30 Hari)

Specifier %d dan %i Bahasa C dan Fungsinya

Enkapsulasi Java dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas