Change aspect ratio of featured images.

  • Resolved nikathesiren

    (@nikathesiren)


    2 years, 8 months ago

    Hello! I made a child theme to modify the Fukasawa theme to my needs, and I’m doing great so far, but now I want to change the aspect ratio of the featured images at the index. Right now, the aspect ratio is the same as the uploaded image, but for the featured image I prefer an aspect ratio of 1:1, just like Hitchcock (another theme from Anders).
    I tried changing the height of the classes .posts, .feature-image…, but I didn’t succeed. How can I achieve what I want?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Anders Norén

    (@anlino)

    Hi @nikathesiren,

    Go to Appearance → Customize → Additional CSS (the menu labels might be different in your language) and add the code below:

    .posts .featured-media,
.posts .featured-media img { aspect-ratio: 1/1; }

    Let me know if that does it.

    — Anders

    Thread Starter nikathesiren

    (@nikathesiren)

    Thanks! I didn’t know the aspect-ratio option, and… it kinda works. The container is a square now, but the featured images look stretched.
    I deleted the .posts .featured-media img from the CSS selection and it looks just like I want them to look, but just with the vertical ones. With horizontal images, there is a white thick line inside the image, even if I crop the featured image to a 1:1 aspect ratio.
    Maybe from now on I can work around this, but I’m not sure I’ll achieve it. I’ll reply if I find a solution.

    Thread Starter nikathesiren

    (@nikathesiren)

    Okay, I found a solution! Maybe not the best, but it works for me.
    Including the solution you gave to me about the aspect-ratio: 1/1;, I also added:

    .posts .featured-media {
    display: flex;
    justify-content: center;
}
.posts .featured-media img {
    object-fit: cover;
    background-position: center;
}

    Now it looks just like I want. I hope this help more people.
    Thank you so much Anders, keep the good work! I love your themes.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change aspect ratio of featured images.’ is closed to new replies.