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.

24

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

4 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

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart