I’m using the Salient theme with the Quantum + Layered Portfolio (Post Loop Builder) in Stacked scroll layout as the core design for my portfolio website.
Currently, the featured images are set as "background-image" with "background-size: cover" by default, which results in parts of my images being cropped, the top half on desktop and the side on tablet.
I need a way to display the full original aspect ratio of each featured image inside the stacked layout, without having to recreate or expand the images with extra blank space.
I’ve tried:
Adjusting the "Image Aspect Ratio" in the Post Loop settings, but only fixed ratios (3:2, 4:3, etc.) are available, so the images still get cropped.
Adding CSS to force "background-size: contain", but Salient’s JS or inline styles override this.
Using "::after" with CSS to re-insert the image, but since the image URL is inline, it cannot be dynamically reused in pure CSS.
Switching to a normal Portfolio Grid, but that breaks the Layered Portfolio stacked scroll effect, which is essential to my site’s core design.
What I need is either:
An official setting or option to use "background-size: contain" for the stacked layout, or
A built-in way to render the featured image as an inline "<img>" tag instead of a background image, so it displays fully and responsively.
I’m hosting on Oracle servers using the Hestia control panel. I already tried using a Salient child theme for custom tweaks, but since that didn't work either, I deleted the child theme folder from my FTP from Hestia
Can you please provide a solution or a reliable method to achieve this, without changing the stacked scroll effect or manually editing each image?
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
I've added the code in the Custom CSS box, though it's containing the image in the container now, it looks worse on a desktop, mobile device or an iPad.
I want it to stay in the box but not add unnecessary space in the mobile devices, also the container in isn't really locking the aspect ratio but rather the image is being zoomed out of proportions.
I simply want the project logos to be visible on all devices like it was before but don't want the logos to be cutoff.
I’m using the Salient theme with the Quantum + Layered Portfolio (Post Loop Builder) in Stacked scroll layout as the core design for my portfolio website.
Currently, the featured images are set as "background-image" with "background-size: cover" by default, which results in parts of my images being cropped, the top half on desktop and the side on tablet.
I need a way to display the full original aspect ratio of each featured image inside the stacked layout, without having to recreate or expand the images with extra blank space.
I’ve tried:
Adjusting the "Image Aspect Ratio" in the Post Loop settings, but only fixed ratios (3:2, 4:3, etc.) are available, so the images still get cropped.
Adding CSS to force "background-size: contain", but Salient’s JS or inline styles override this.
Using "::after" with CSS to re-insert the image, but since the image URL is inline, it cannot be dynamically reused in pure CSS.
Switching to a normal Portfolio Grid, but that breaks the Layered Portfolio stacked scroll effect, which is essential to my site’s core design.
What I need is either:
An official setting or option to use "background-size: contain" for the stacked layout, or
A built-in way to render the featured image as an inline "<img>" tag instead of a background image, so it displays fully and responsively.
I’m hosting on Oracle servers using the Hestia control panel. I already tried using a Salient child theme for custom tweaks, but since that didn't work either, I deleted the child theme folder from my FTP from Hestia
Can you please provide a solution or a reliable method to achieve this, without changing the stacked scroll effect or manually editing each image?
Thank you for your help!
Attached files: Screenshot 2025-07-15 013523.jpg
Screenshot 2025-07-15 013548.jpg
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.nectar-post-grid .nectar-post-grid-item-bg img { object-fit: contain !important; }Thanks
Salient Support Team
Hey there,
I've added the code in the Custom CSS box, though it's containing the image in the container now, it looks worse on a desktop, mobile device or an iPad.
I want it to stay in the box but not add unnecessary space in the mobile devices, also the container in isn't really locking the aspect ratio but rather the image is being zoomed out of proportions.
I simply want the project logos to be visible on all devices like it was before but don't want the logos to be cutoff.
Thanks.
Attached files: desktop ss.jpg
ipad ss.jpg
mobile ss2.jpg
mobile ss1.jpg
Thanks for the details.
Please view: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit to get an understanding of whats possible with CSS object-fit property.
You can also use media queries to set different CSS values for each viewport that is Desktop/ Tablet / Mobile.
Salient Support Team