How change the image box height without stretching the image?

This topic contains 13 replies, has 3 voices, and was last updated by  Sebastian 7 years, 1 month ago.

Author Posts

palabyrinth

when i change the height etc for featured images on my posts homepage, the images’ proportions get messed up. How can i change the image size – with the images cropped to fit in it rather than stretched/squashed?

thanks


Sebastian

Hi there,

If you set width to auto that should maintain the proportions of the image. Similarly, if you were to change the width of an image, setting height to auto would also maintain the proportions.

Does that solve your issue?

Cheers,
Sebastian


palabyrinth

Hi that makes the image retain it’s proportions however it then leaves an empty gap to the right of the image. I need to keep the image’s proportions – but still be able to fill the the whole width of the space (meaning the the top/bottom gets cropped accordingly in order to fill the whole space, while keeping the image’s original proportions. Do you know how I can achieve this?


palabyrinth

I need help with this urgently; something so common and necessary as changing an image size while retaining proportions is very unintuitive.


Abland

Hi, palabyrinth,

Maybe try these rules. I’m assuming 250 x 250 thumbnails so adjust max-width to yours:

width: 100%;
max-width: 250px;
height: auto;

If they don’t work for you, if you could provide a link to your site that would help.


palabyrinth

Hi I’m finding that still doesn’t work. Taking a look at my site is kind, thanks.

A new height of 245px while keeping the theme’s default width is what i’m aiming for with my homepage’s pictures at pinkiesense.com .

I’m aiming for similar to the 9gag.com sidebar; the images aren’t squashed to fit the rectangle shape. If it would help to know my wordpress theme it’s the free one here https://wordpress.org/themes/no-nonsense . Thanks


Abland

test – I can post but cannot post my reply


Abland

I’ll try a different tactic – I was posting some style rules to use in addition to the image ones and the post wasn’t getting accepted.

So, the header element wraps the image. Set a height of 245px on that header element and make overflow hidden.
Remove the max-height on the images.
Set a negative margin on the image to draw it upwards in the header element.


palabyrinth

Hi I couldn’t see what you mean by header element. I’ve attached a link to a screenshot of the options i have available

View post on imgur.com


Abland

The inspector tab should take you to it, but this is the element:
#siteContent .has-post-thumbnail header
Set the height and overflow rules on that element selector. Remember to remove the max-height on your images and add a negative top-margin instead.


palabyrinth

Hi thanks, there’s some significant progress. The closest I was able to find using the inspector was
“div#siteContent article.has-post-thumbnail”
and following your instructions it has turned out well in places, but overlapping in others with text being hidden behind images etc. Can you see what’s causing the inconsistent results?


Abland

Closer 🙂 Manually edit your selector by adding header to it:

“div#siteContent article.has-post-thumbnail header”


palabyrinth

that’s it! Thank you for taking time out of your life and helping me.


Sebastian

I’ve said it before and I’ll say it again. You are a living legend Abland. Thanks so much for stepping in to help on this one.

@palabyrinth please let me know if you need further assistance with anything.

Cheers,
Sebastian

You must login or register to reply to this topic.