Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Code Wizard Required!

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #243001
    martyd23
    Participant

    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

    #243003
    Paulie_D
    Member

    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.

    #243005
    martyd23
    Participant

    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/

    #243036
    martyd23
    Participant

    This issue has now been resolved.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.