Site URL: http://theneonplanet.com.au/home-2-2/
Hi, I am working on this wordpress website. I use divi theme but I manually change things with css.
this is currently placed in the recent stories section.
The problem is that the post image is placed correctly but it is stretched inside the div and it looks very strange; the picture is not suppose to be this thin.
I want the image to be filled inside the div. which means it doen’t need to be the same width of the div but it has to fill the space.
is there any code solution for this?
I tried object-fit, and min and max height. both didn’t work..
2
Answers
use
background-size: cover;
attribute in yourcss
for the background imageThere are multiple ways to make an image fill a div element using CSS. The easiest way would be to set the image as the
background-image
of the div and set thebackground-size
tocover
. You can also set thebackground-position
to align the image.But in your case, you seem to be using a WordPress plug-in which inserts the image as an
img
tag inside the div and stretching the image to the size of the div. So we can use theobject-fit
CSS property on theimg
element to make the image fill the size of theimg
element.Your code will look something like this.
Just as with the
background-image
approach,object-fit: cover
will make your image fill the size of theimg
tag andobject-position: center
will align the image to the center.