Question posted in
The full documentation can be found here.

Divi theme – How to fill image without stretching the image

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.

second section image

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..

Tags:

2

Answers


  1. 0

    use background-size: cover; attribute in your css for the background image

    Login or Signup to reply.
  2. 0

    There 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 the background-size to cover. You can also set the background-position to align the image.

    div {
    background-image: url("image.jpg");
    background-size: cover;
    background-position: center;
}

    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 the object-fit CSS property on the img element to make the image fill the size of the img element.

    Your code will look something like this.

    #tesco-slider .et_pb_slide_image img {
    object-fit: cover;
    object-position: center;
}

    Just as with the background-image approach, object-fit: cover will make your image fill the size of the img tag and object-position: center will align the image to the center.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search