Code Wizard Required!

[martyd23]

Hi, i’ve been having trouble over the past few days getting images on my homepage to all appear the same height. I want each image to have the same height regardless of its aspect ratio. But i don’t want a fixed height because i need the images to be responsive and look proportional when resized.

Is there a way i can fix this with css?

I’m having the issue here: http://www.celebrityhealthcritic.com/

Thanks

Marty

[Paulie_D]

What height do you want?

How do you want the images to react if they are smaller or larger?

Proportion to what?

I think you might be overreaching here.

[martyd23]

Hi Paulie,

I would like the images to get larger or smaller based on browser/device size without looking distorted (i.e., be responsive). The images should appear the same height as the image for “test post 6” and “test post 2”. The should fill the container div (.posts-blog-feed-module .header ? ) for the image like images 6 and 2.

I had the same problem with the images being a different height with the related post images on the bottom of each page. But i managed to fix this with css. This fix doesn’t seem to work on the homepage for some reason, and i’m wondering if i’m trying to style the wrong things?

The fix that worked for the image height problem with the related posts (fixed only on local test site) was:

.related-post .featured-image {
background: rgba(0, 0, 0, 0);
width: 100%;
margin: 0 0 10px 0;
line-height: 0;
position: relative;
overflow: hidden;
padding-bottom: 70%; /* here the desired aspect ratio */
}

.related-post .featured-image img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius: 8px;
height:100%;
width:100%;
}

I have tried to add this code to .posts-blog-feed-module .header and .posts-blog-feed-module .header img but it doesn’t work.

Here is an example of the same height issue with the related posts at bottom of the page, which i have now fixed on my local test site so all images are the same height and proportional:

http://www.celebrityhealthcritic.com/test-post-5/

[martyd23]

This issue has now been resolved.

[Author]

Posts