+- QP School (https://qomplainerzschool.lima-city.de)
+-- Forum: Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=3)
+--- Forum: CSS3 Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=5)
+--- Thread: CSS Object Fit and Object Position (/showthread.php?tid=5195)
CSS Object Fit and Object Position - Qomplainerz - 07-26-2023
Description:
The object-fit property allows you to control how an image or video should be resized within its container, and object-position lets you specify where the image should be positioned.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Object Fit and Object Position Example</title>
<style>
.image-container {
width: 300px;
height: 200px;
border: 1px solid black;
overflow: hidden;
}
.image {
width: 100%;
height: 100%;
object-fit: cover; /* Other values: contain, fill, etc. */
object-position: right bottom;
}
</style>
</head>
<body>
<div class="image-container">
<img class="image" src="image.jpg" alt="Image">
</div>
</body>
</html>
Explanation:
In this example, the .image-container div has a fixed width and height, and overflow: hidden is applied to hide any overflow from the image. The .image image inside the container is set to width: 100% and height: 100%, making it fill the container. The object-fit: cover property resizes the image to cover the entire container while maintaining its aspect ratio. The object-position: right bottom positions the image to the bottom-right corner of the container.