How change the image box height without stretching the image?

Author Posts

palabyrinth August 14, 2015 at 2:14 pm

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 August 14, 2015 at 3:16 pm

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 August 14, 2015 at 4:49 pm

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 August 15, 2015 at 4:07 pm

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

Abland August 15, 2015 at 6:31 pm

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 August 16, 2015 at 12:14 am

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 August 16, 2015 at 12:55 am

test – I can post but cannot post my reply

Abland August 16, 2015 at 1:09 am

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 August 16, 2015 at 10:31 am

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 August 16, 2015 at 1:59 pm

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 August 16, 2015 at 3:21 pm

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 August 16, 2015 at 4:03 pm

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

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

palabyrinth August 16, 2015 at 5:57 pm

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

Sebastian August 17, 2015 at 10:42 am

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.