My customer wants all boxes on the front page of http://www.haus-der-bilder.de/wp2/ have the same height. I have already kinda managed to get there by adding fixed height values to a) the text part of the box and b) the picture part.
This one gives a fixed height to the text part (headline and if needed description text):
.entry-container {
padding:2.9%;
margin:0;
height: 80px;
}
And this one gives the picture part inside the box a height of 200 px:
figure img {
display:block;
margin:0 auto;
height: 200px;
width: 100%;
}
At the first glance this looks fine.
But when you take a closer look at the pictures the proportions are wrong:
“Girls want to have FUN” – original height was less than 200 px and it got stretched to 200 px
“PoP Art @ Haus der Bilder” – original height was more than 200 px and it got compressed to 200 px
I have tried quite some stuff like this but couldn’t get the proportions back:
.wp-post-image {
display: block;
width: 100%;
overflow: hidden;
}
I even wouldn’t mind if the picture is cropped to its top 200 px – but the proportions need to be correct.
Can anyone please get me an advice on how I can get back the pics’ proportions?
Your help would be appreciated a lot…
Thanks
Scherli
Try using max-height, in stead of height. As otherwise it’s a forced size you’re using, in stead of a size limit.
Nope, max-height neither gets me the effect I want. It doesn’t stretch smaller pics anymore but it still compresses larger ones out of their proportions.
In Appearance -> Theme Options
Is the hard crop thumbnails option ticked?
Try unticking that.
Theme options / General / Hard crop post thumbnails isn’t activated.