CSS Object Fit for Image fill rather than using background image on a div
CSS Object Fit can crop off the sides of an image, while also preserving its aspect ratio, and then fill in the space to fit any size.
Object Fit
You can use:
object-fit:
With the following syntax or options.
- fill
- contain
- cover
- scale-down
- none
- initial
- inherit
The most popular ones of these are probably the contain and cover, but it will depend on your situation.
Object Position
The object-position property can be used with the object-fit property to change how an <video> or <img> can be positioned with its x and y coordinates in its own content box. It defaults to x 50% and y 50%.
object-position: x y
Here is some demos on how you can use Object Fill and Object Position to make images fit where you want them without having to manually resize the image or use the background image property on a div.
Video
HTML
<h3>Original Image</h3>
<img src="https://picsum.photos/300/300">
<h3>Object Fit Contain</h3>
<p>you can drag the image size to see how contain functions depending on size of the wrapping element</p>
<div class="obj-wrap">
<img src="https://picsum.photos/300/300" class="obj-fit-1">
</div>
<h3>Object Fit Cover</h3>
<p>Now the image is set to cover so you can see how the image covers the whole div depending on its size, this will clip the image, but remain centered unless we change the <code>object-position</code></p>
<div class="obj-wrap">
<img src="https://picsum.photos/300/300" class="obj-fit-2">
</div>
<h3>Object Position</h3>
<p>in the following example we use <code>object-position</code> to change where the object sits depending on how the wrap is resized. In this case it is set to bottom and center.</p>
<div class="obj-wrap">
<img src="https://picsum.photos/300/300" class="obj-fit-3">
</div>
<h3>Object Position Using a Percentage</h3>
<p>you can also use object position with a percentage or a pixel value if you dont want the image to center by default, default value for <code>object-position</code> is 50% 50%</p>
<div class="obj-wrap">
<img src="https://picsum.photos/300/300" class="obj-fit-4">
</div>CSS
.obj-fit-1 {
width:100%;
height:100%;
object-fit:contain;
}
.obj-fit-2 {
width:100%;
height:100%;
object-fit:cover;
}
.obj-fit-3 {
width:100%;
height:100%;
object-fit:cover;
object-position:bottom center;
}
.obj-fit-4 {
width:100%;
height:100%;
object-fit:cover;
object-position:10px 40%;
}
.obj-wrap {
resize:both;
display:block;
overflow:auto;
height:200px;
width:100px;
}Original Image
Object Fit Contain
you can drag the image size to see how contain functions depending on size of the wrapping element
Object Fit Cover
Now the image is set to cover so you can see how the image covers the whole div depending on its size, this will clip the image, but remain centered unless we change the object-position
Object Position
in the following example we use object-position to change where the object sits depending on how the wrap is resized. In this case it is set to bottom and center.
Object Position Using a Percentage
you can also use object position with a percentage or a pixel value if you dont want the image to center by default, default value for object-position is 50% 50%
