objectFit Style HTML DOM dan Fungsinya
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.
- 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>
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>
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>
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>
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>
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>
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>
Blog Elfan
Properti Style objectFit DOM
- 5 Value Properti Outline Style DOM pada HTML
- 3 Value Properti outlineColor Style DOM pada HTML
- 3 Value Properti outlineOffset Style DOM pada HTML
- 12 Value Properti outlineStyle DOM pada HTML
- 6 Contoh Properti outlineWidth Style DOM pada HTML
- 6 Value Properti Overflow Style DOM pada HTML
- 6 Contoh Properti overflowX Style DOM pada HTML
5 komentar untuk "objectFit Style HTML DOM dan Fungsinya"
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 -
Jenis browser apa saja yang dapat digunakan oleh seorang pengembang untuk mengaktifkan properti objectFit Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser populer yang dapat digunakan oleh seorang pengembang untuk mengaktifkan properti objectFit Style DOM pada HTML:
Hapus1. Google Chrome 31.0
2. Internet Explorer 16.0
3. Firefox 36.0
4. Opera 19.0
5. Apple Safari 7.1
Apa yang dimaksud dengan properti objectFit Style DOM pada HTML?
BalasHapusProperti 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.
HapusProperti 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