GP 2: Featured image on archives page resizing

Hi there,

Looks fine to me? https://s18.postimg.org/juj05hn61/2018-01-04_1211.png

Hello Leo,

please have a look on my Screenshot above. I rolled it back, because this doesn't look really nice and the page is online ...

Best, Daniel

Yes I saw the screenshot but it's hard to tell what the problem is without seeing it live - especially we haven't had others reported this issue.

Does it only happen in customizer mode?

ok, I'll make it live for some minutes, ...

ok, seems to be a customizer problem. But now I don't have the full width?

Is there a way to crop to 100% width and 400 height?

Better explanation:

Hmm then your picture would be stretched and lose the original ratio?

ok, then I leave it as it is.

I had in mind, that there is a css-soultion to set a height and cut off the rest of the image...

One alternative would be to crop the picture to the exact size you want it so that it's 400px height and whatever width to fill the space.

I tried this, but it didn't really help:

.post-image img {
	max-height: 450px;
	max-width: 100%;
	overflow: hidden;
}

You can't set both max-height and max-width as it isn't very logical.

I think in your case cropping the picture or using Wordpress edit media will be the way to go.

ok, this seems to work:

/* for the archive pages */
.post-image img {
  width: 100%;
  overflow:hidden;
  max-height: 480px;
}

/* for the post */
.post-image-above-header .no-featured-image-padding .inside-article .featured-image {
  max-height: 480px; 
  overflow:hidden;
}

I combined it with the plugin Minimum Featured Image Size to force my authors in the future to use better images. Maybe somethings that could be integrated into GP?

This is actually the first time someone request this so I don't think it's worth adding it in it.

Most people are happy with the cropping we provide in the customizer.

Glad you found the solution though!

Thanks for sharing this. I'm trying to limit the dimensions of the featured images to a maximum width and maximum height (i.e., constrain without cropping) using pure CSS and had an idea on how to do it, but it doesn't work out in all cases.