Hi all! I’m trying to upload all of our projects on the website. However when on a desktop, for images in a slideshow, or in portrait mode, they become huge, and you have to scroll many times to get to the end of the photo. I want to keep the aspect ratio the same, hence choosing Adapt to image, but I want the entire image smaller, not just cutting the top or bottom off.
I am using the Craft theme. Please help! Villa Riwaka – Living Design
You can change Height setting of Slideshow to make it smaller
Best regards,
Dan from Ryviu: Product Reviews App
Thank you, but that just changes the format to a landscape photo by cutting the top and bottom off my image. I would like to keep the full photo viewable (and in portrait mode), just smaller. Is this possible?
Hi @smilla123
If you want to lower the height without cropping this means that the entire section width have to decrease too – you can’t fight geometry.
You can try something like this in “Custom CSS” setting of this section
slideshow-component {
max-width: 80rem;
}
The result will be like this:
This can look nice if you put image of the next section to the right:
This is expected behavior with “Adapt to image”. Craft keeps the original aspect ratio, so tall (portrait) images become very tall on desktop.
If you want the full image visible but smaller, you must limit the max height (not crop).
Best solution (no cropping)
Add this to Theme settings → Custom CSS:
.slider__slide img,
.media img {
max-height: 80vh; /* limits height to screen */
width: auto;
margin: 0 auto;
object-fit: contain;
}
(You can reduce 80vh to 60vh if images are still too tall.)
Thank you so much! This is exactly what I was after!!
Welcome! Great content BTW.