11 April 2020, 7:20 pm by antelove
CSS: object-fit
Happy Coding
index.html
/* ------------------------------------------------------------ */
/* CSS object-fit */
/* */
/* Author: antelove */
/* Website: antelove.com */
/* ------------------------------------------------------------ */
<!DOCTYPE html>
<html>
<head>
<title>CSS object-fit</title>
<style>
img {
width: 200px;
height: 400px;
border: 1px solid red;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.scale-down {
object-fit: scale-down;
}
.none {
object-fit: none;
}
</style>
</head>
<body>
<h1>The object-fit Property</h1>
<h2>No object-fit:</h2>
<img src="https://antelove.com/uploads/images/thumb/1585895398.jpg" alt="1" />
<h2>object-fit: fill (this is default):</h2>
<img class="fill" src="https://antelove.com/uploads/images/thumb/1585895398.jpg" alt="2" />
<h2>object-fit: contain:</h2>
<img class="contain" src="https://antelove.com/uploads/images/thumb/1585895398.jpg" alt="3" />
<h2>object-fit: cover:</h2>
<img class="cover" src="https://antelove.com/uploads/images/thumb/1585895398.jpg" alt="4" />
<h2>object-fit: scale-down:</h2>
<img class="scale-down" src="https://antelove.com/uploads/images/thumb/1585895398.jpg" alt="5" />
<h2>object-fit: none:</h2>
<img class="none" src="https://antelove.com/uploads/images/thumb/1585895398.jpg" alt="6" />
</body>
</html>
