Image ratio – WP Show Posts

This topic has 5 replies, 2 voices, and was last updated 3 years, 1 month ago by Tom.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
October 4, 2020 at 9:06 am #20659

Samuel
Participant

Hi,

I don’t know why but I was sure Wp show post was forcing images to display with same ratio…

But it seems that I was wrong…

Is there a way to force ratio ? Like 4:3 or 3:2 ? I don’t want to specify a size in px because it causes trouble when it comes to responsiveness.

Thanks for your help,
Sam

October 5, 2020 at 3:29 pm #20710
Tom
Keymaster
Hi there,

You can use CSS along with the object-fit property.

For example:
```
img {
    height: 200px;
    object-fit: cover;
}
```
You’d need to use the right selector, but that idea should work.

Let us know 🙂
October 6, 2020 at 2:15 am #20731

Samuel
Participant

Hi Tom,

Thanks for your help,

“Height” value is working well but “object-fit” value doesn’t seem to change anything here.

With CSS using just “Height” value, responsive is a little bit weird if stretching the window but with Firefox mobile and tablet preview it seems fine.

What’s your opinion ? You can check it there

October 9, 2020 at 9:36 am #20858

Tom
Keymaster

Those images look quite good to me – any example of what they’re supposed to look like?

October 10, 2020 at 3:47 am #20903

Samuel
Participant

No it looks nice, I was just talking about the responsive part : when stretching the window, at 767px width it turns to one column and it looks a bit too wide until you get to the mobile size, no ?

October 13, 2020 at 11:12 am #21106
Tom
Keymaster
Yea, you can try this to fix that:
```
@media (max-width: 767px) {
    .wpsp-card .wp-show-posts-image img {
        width: 100%;
    }
}
```
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

[Support request] Image ratio