Adjusting the picture – WP Show Posts

Tagged: adjusting width and height

This topic has 5 replies, 2 voices, and was last updated 5 years, 10 months ago by Tom.

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

Author

Posts
October 27, 2017 at 4:21 am #2860

Alberto
Participant

Hello!
I’d just bought your great plugin and I’m trying to familiarize with it but I don’t know the way to adjust the pictures you can see at http://duitslanddag.sjbdixital.net
I want to adjust the images so that they fill the entire width of the box, whether I’m looking at it on my desktop or on a mobile device and I want the height of the images showed is the same.
I’m working with fixed width and height in the plugin configuration, but that causes them not look good on mobile devices as you can see. And if I don’t work with width and height, they look different in height.
How do I fix it?

Thanks!

October 31, 2017 at 9:29 pm #2883

Tom
Keymaster

Hi there,

Sorry for not getting back to you sooner!

Did you get it sorted? They looks full width and all the same height now.

Let me know 🙂

November 2, 2017 at 1:46 am #2891

Alberto
Participant

Hi Tom.
Sorry for the delay replying but I’m not receive the email notifying me your reply…
It’s not solved at all. You can see the images doesn’t adjust in responsive because of working with fixed width and height, and if I don’t work in this way, the different heights makes them looks bad.
Is it the best choice working with object-fit in CSS?

Thanks.

November 6, 2017 at 11:58 am #2908
Tom
Keymaster
You could try a solution like this:
```
.wp-show-posts-image {
    height: 175px;
    overflow: hidden;
}
```
Then the images could be taller than that, but they will cut off and be hidden after the 175px height.

Let me know 🙂
November 8, 2017 at 10:13 am #2919
Alberto
Participant
Hi Tom!
Sorry for delaying but I don’t receive emails notifying me your replies…
I’d tried but it doesn’t work fine at all.
It seems it works better with this:
```
.wp-show-posts-image img{
	height: 175px;
	max-width: -webkit-fill-available; /*Maybe not necessary...*/
	object-fit: cover;
    	overflow: hidden;
}
```
November 16, 2017 at 6:20 pm #2968

Tom
Keymaster

Is that working as it should? I just checked your site but it’s hard to tell as the images are still hard cropped.
Author

Posts

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

You must be logged in to reply to this topic.

[Support request] Adjusting the picture