Image size on homepage

  • Author
    Posts
  • #137433

    Hey, I’m trying to align the image sizes on the homepage to be the same. They currently are not of the same size, but I would like to have them all in a square.

    Is there any CSS code I could use to get them into the same size?

    Thanks

    The blog I need help with is littlewhitelittlegold.com.

    #137434

    lelandf
    Theme Author

    Hi there,

    Yes. I’m guessing you already know this, although I do want to note this will cause distortions in any image that is not a perfect square.

    body .masonry .post-thumbnail-link {
      height: 0;
      padding-top: 100%;
      display: block;
      position: relative;
    }
    
    body .masonry .wp-post-image {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      width: 100%;
      height: 100%;
    }

    Let me know how this works out for you.

    Regards,
    Leland

    #137437

    Hey Leland,

    Thanks for getting back. Yes, this does work but my images are now stretching. Is there anything you think I can do to cause it to not make that happen?

    I’ve added the code on to my site, you should be able to have a look at it for your reference.

    #137438

    lelandf
    Theme Author

    Hi there,

    Yes, this does work but my images are now stretching.

    Yes, this is what I meant when I said “this will cause distortions in any image that is not a perfect square” although stretching is probably a more accurate term.

    Is there anything you think I can do to cause it to not make that happen?

    Can you describe how you were hoping this would work? It may be possible but I’m having trouble understanding what you are expecting.

    Regards,
    Leland

    #137439

    Hey, yup, sorry read your note about distortions after I replied.

    The square images were exactly how I was looking for them, but is there anyway to avoid the stretch?

    If not, do you think there is any other alternative to do this? The only way I could think of it would be to crop all the images into square formats than random sizes.

    #137440

    lelandf
    Theme Author

    There’s a way to avoid the stretch, although it has the side effect of not filling out the square container completely on landscape-oriented images, like this one: https://littlewhitelittlegold.files.wordpress.com/2018/10/1a-thumbnail-e1540937669576.jpg

    Portrait-oriented images, like this one: https://littlewhitelittlegold.files.wordpress.com/2018/07/2018-06-26-09-12-06-1810009145933821230_4187009427.jpg …will be cut off at the bottom, but fill out the square container completely.

    To see what I mean, replace the previous CSS code with this:

    body .masonry .post-thumbnail-link {
        height: 0;
        padding-top: 100%;
        display: block;
        position: relative;
        overflow: hidden;
    }
    
    body .masonry .wp-post-image {
        position: absolute;
        top: 0;
    }

    Unfortunately, I don’t think there is a perfect solution to be had with pure CSS without using square-shaped images consistently throughout all of your homepage posts.

    #137441

    Gotcha, I see what you mean. Thanks for helping out. I’ll probably use the second code if I don’t end up just using all square images.

    Thank you again for helping out.

    #137469

    [re-opening this]

    Hi Leland,

    One last question: is there anyway the portrait oriented images only can fit inside a white box within the square format? If you look at the site now, the portrait images have the white space under, but i’d rather have the entire image within a white square instead.

    screenshot for your reference of what i’m talking about: https://drive.google.com/file/d/1iKfL3XVTs692Pg-0hLbMlkKtYZA3_GYu/view?usp=sharing

    Just to confirm, all portrait images only, the landscape images can stay how they are.

    #137475

    lelandf
    Theme Author

    Just to confirm, all portrait images only, the landscape images can stay how they are.

    There is a way to put a white box (in CSS terms, a solid white border) around every image, but there’s not a way for the CSS to only effect portrait images.

    Try this out and let me know what you think:

    body .masonry .post-thumbnail-link {
    	border-style: solid;
    	border-color: white;
    	border-width: 0 40px 0;
    }

The topic ‘Image size on homepage’ is closed to new replies.