Archived topic
Auto resize/crop featured images to fill content container?
9 replies · Started by Eric on September 19, 2019
Hey GP Team, I was wondering if you could offer me a CSS solution to automatically style and resize the featured images?
At the moment I have several images and all of them are different sizes. I would like to automatically display each image to fill out the entire content width and to crop whatever doesn't fit in a given height. Is that possible?
No matter what I place in the customizer, the featured image always stays the same size. I would like to set the CSS so that every image is auto stretched or cropped to fit the whole space before the title.
Thanks so much for your time and more power to GENERATEPRESS!!!
Hi there,
is this just for the Featured Image on your single Posts ? Or is this for every image in the post?
Hey David! Thanks for replying... Yes, this is ONLY for page and post featured images. The other images should just be treated as normal.
So try this CSS:
.post-image-above-header .inside-article .featured-image img {
width: 100%;
height: 300px;
-o-object-fit: cover;
object-fit: cover;
}You can adjust the height property to suit. If you just want them to fit 100% wide and leave the height as is then remove all the properties apart from the width: 100%;
Thank you, David! This worked great... Is there anyway I can make it display the image smaller JUST on mobile? Like maybe shrink it to only occupy the top third of my phone screen? At the moment it keeps the 300px height for both, and it takes a lot of space up when viewed on my phone.
You can create another CSS rule specifically mobile like so:
@media (max-width: 768px) {
.post-image-above-header .inside-article .featured-image img {
height: 200px;
}
}Fantastic! Thanks again for your help, David. Worked like a charm!
Glad to be of help
Hi David,
I'm very surprised and impressed by GeneratePress! After 5 years of TagDIV Newspaper this is really much smarter. I can find most of my answers already in docs and forum.
In this case I wanted the same effect, however I'm using a 'Single Post' Element and in there I've chosen for the Featured Image as background.
Above CSS doesn't work for that, is it somehow possible to achieve the same?
Kind regards and thanks,
Marcel
Hi Marcel,
glad to hear your enjoying the Theme.
Could you raise a new topic where you can use the Site URL Field to share your site privately and we can take a look :)
