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%
View Statistics
Add Comment
Other Items in css
Related Search Terms
Other Categories in Code
Random Quote
"Olivia, my eldest daughter, caught measles when she was seven years old. As the illness took its usual course I can remember reading to her often in bed and not feeling particularly alarmed about it. Then one morning, when she was well on the road to recovery, I was sitting on her bed showing her how to fashion little animals out of coloured pipe-cleaners, and when it came to her turn to make one herself, I noticed that her fingers and her mind were not working together and she couldn’t do anything. 'Are you feeling all right?' I asked her. 'I feel all sleepy,' she said. In an hour, she was unconscious. In twelve hours she was dead. The measles had turned into a terrible thing called measles encephalitis and there was nothing the doctors could do to save her. That was...in 1962, but even now, if a child with measles happens to develop the same deadly reaction from measles as Olivia did, there would still be nothing the doctors could do to help her. On the other hand, there is today something that parents can do to make sure that this sort of tragedy does not happen to a child of theirs. They can insist that their child is immunised against measles. ...I dedicated two of my books to Olivia, the first was ‘James and the Giant Peach’. That was when she was still alive. The second was ‘The BFG’, dedicated to her memory after she had died from measles. You will see her name at the beginning of each of these books. And I know how happy she would be if only she could know that her death had helped to save a good deal of illness and death among other children."
I just checked google books for BFG, and the dedication is there.
https://www.google.com.au/books/edition/_/quybcXrFhCIC?hl=en&gbpv=1
Roald Dahl, 1986
