0 0
Read Time1 Minute, 21 Second


<!DOCTYPE html>
<html>
<body>
<style>
.cover-object-fit {
width:200px;
height:300px;
object-fit:cover;
object-position: 50% 50%; /* default value: image is centered*/
object-position: 0 0; /* positioned top left of the content box */
}


.no-object-fit{
width:200px;
height:300px;
}


.contain-object-fit{
object-fit: contain;
width:200px;
height:300px;
}


.none-object-fit{
object-fit: none;
width:200px;
height:300px;
object-position: 50% 50%; /* default value: image is centered*/
object-position: 0 0; /* positioned top left of the content box */
}

</style>

<div class=”inblock”>
<h2>Tanpa object-fit</h2>
<img class=”no-object-fit” src=”http://lorempixel.com/output/animals-q-c-640-480-9.jpg” alt=”gambar1″ width=”400″ height=”300″ />
</div>

<div class=”inblock”>
<h2>object-fit : cover</h2>
<img class=”cover-object-fit” src=”http://lorempixel.com/output/animals-q-c-640-480-9.jpg” alt=”gambar2″ width=”400″ height=”300″ />
</div>

<div class=”inblock”>
<h2>object-fit : contain</h2>
<img class=”contain-object-fit” src=”http://lorempixel.com/output/animals-q-c-640-480-9.jpg” alt=”gambar3″ width=”400″ height=”300″ />
</div>

<div class=”inblock”>
<h2>object-fit : none</h2>
<img class=”none-object-fit” src=”http://lorempixel.com/output/animals-q-c-640-480-9.jpg” alt=”gambar4″ width=”400″ height=”300″ />
</div>

</body>
</html>

 

Link Code Pen

Terima Kasih, semoga membantu.
btw saya lagi bangun channel youtube. minta tolong bantuan di subs yak.

Subs Channel Saya yah. Thank You

About Post Author

TahuBanyak

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %
Previous post Pemicu hastag #BoikotTraveloka #UninstallTraveloka
Next post Hero Baru Mobile Legend : Jawhead

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Leave a Reply

Your email address will not be published. Required fields are marked *