How To Make An Image Module Fill The Column Height In Divi Tutorial by Pee Aye Creative

How To Make An Image Module Fill The Column Height In Divi

In this tutorial I will show you how to make an Image module automatically fill the entire height of the column in Divi.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

1. Set Up The Row, Column, And Image

The first step is to add a row to your layout. In our example, we will be using two columns, so select the two column layout.

Place an Image module into the first column on the left. In the other column, you can place any other modules you want, but in my example I’ll use a Text module. To make the text taller, I am duplicating the placeholder text two times.

Open the Row settings and go to the Design tab to the Sizing toggle and enable the Equalize Column Heights setting.

The screenshot below shows what I have so far:

NOTE: I added the red borders to the column for demonstrations purposes to show the height of the columns, but you would not need to do that.

setting up the row columns and image in Divi to make image full height

2. Add A Custom CSS Class To The Divi Image Module

The first step is to add a custom CSS class to the Divi Image module. Using a custom class like this will make sure that our code only affects this particular image module with this class, rather than affecting all the images on your site.

Open the Divi Image module settings and go to the Advanced tab and open the CSS ID & Classes toggle. From there, copy and paste or write “pa-full-height-image-column” into the CSS Class input field, as shown in the screenshot.

add a custom css class to the Divi image to make it full height in column

3. Add The Custom CSS Code Snippets To Your Website

Where To Add The Code Snippets

Now that you have set up the row layout, image, and added the custom CSS class to the module, you can proceed to adding the code snippet below.

If you are using our free Divi child theme, place the snippet(s) into the style.css file. Otherwise, place them in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*this sets the height of the image module*/
.pa-full-height-image-column {
	height: 100%;
}

/*this sets the height of the image container*/

.pa-full-height-image-column .et_pb_image_wrap {
	height: 100%;
}

/*this sets the height and fit of the actual image*/
.pa-full-height-image-column img {
	object-fit: cover;
	height: 100%;
}

The code is labeled with a few notes. Basically we need to set the height of the module, the image container, and the image itself to 100%. Then the last step is setting the image to object-fit: cover; which means the image will maintain it’s original aspect ratio and simply zoom in so that it fills the entire height and width of the container. Keep in mind, the image will appear “cropped” as the layout and column width changes, but this is necessary to achieve the effect.

Last updated Jul 25, 2022 @ 7:06 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

14 Comments

  1. Mariana

    Even if I know how-to of many Divi ‘issues’ , I am happy to read your tutorials, I have learnt so much thanks to you. Keep on doing such a good job, thanks very much from France !!

    Reply
  2. Rana Saim Faisal

    Your tutorials are really really helpful for students like me .

    Reply
  3. Jules Webb

    This is very handy. I’ve been setting a background image on the column on desktops and using the image module on smaller devices. Your technique is so much better. Thank you!

    Reply
    • Hemant Gaba

      Hey Jules,

      We are glad to hear that we could offer some help.

      Reply
  4. Pierre Fardel

    Hey,

    Is it working with images from gallery module ? In the fullwidth mode.

    Thanks you for your help

    Reply
  5. Epi

    Hello just wondering if this is still working? I have tried it on the latest Divi version and while the CSS is applied correctly nothing seems to be happening. Thank you!

    Reply
  6. David

    Cant I simply add the CSS to the custom CSS of the model? Why would I need to add this to the CSS of the full site?

    Reply
  7. Jessie

    Thank you SO MUCH for this!!!

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart