- This topic is empty.
-
AuthorPosts
-
June 18, 2016 at 10:09 am #243001
martyd23
ParticipantHi, 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
June 18, 2016 at 11:20 am #243003Paulie_D
MemberWhat 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.
June 18, 2016 at 12:46 pm #243005martyd23
ParticipantHi 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:
June 21, 2016 at 8:51 am #243036martyd23
ParticipantThis issue has now been resolved.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.