I am making a site in Wordpress using Elementor, and I have images where the Object Fit is set to Cover. This works fine on Firefox, but when using Google Chrome it doesn't appear to be working. See the image below:
Don't worry about the font, that's just in my Chrome settings.
Here is the settings on the image in Elementor:
Does anyone know why this is happening?
Even if I add the CSS
img{
object-fit: cover;
}
it still doesn't work properly.
EDIT: I don't think it has to do with Elementor or anything, just with Chrome itself. If I just do the following:
<html>
<style>
img{
object-fit: cover;
height: 200px;
width: 200px;
}
</style>
<img src="228.jpeg">
</html>
It still doesn't work properly in Chrome, giving the following:
So what you want is for the div containing the img to essentially act as a frame that goes on top of the img, cutting off the parts of the img that go outside that frame. You aren't trying to change the dimensions of the actual image to fit inside of the frame. Try changing the dimesnions of the img's containing div to the 200px width and height if those are the dimensions you want the img to be. Then keep object-fit:cover but change the img width and height to 100%. This will force it to take up the entire space of the containing div without being warped.