0
0
<!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
