A Shopify store owner reports slideshow images appearing squeezed on certain devices, despite being properly fitted. They want images to fill the entire container rather than being constrained within it.
Two CSS solutions were proposed:
Solution 1 (Rahul_dhiman):
.slideshow .swiper-slide img with object-fit: fill !important and 100% width/heightSolution 2 (DaisyVo):
.slideshow__image with object-fit: contain !importantBoth solutions modify the object-fit property but use different values (fill vs. contain) and target different CSS selectors. The original poster has not yet confirmed which approach resolved their issue.
My slideshow images are getting squeezed on some devices even though they are fit… can you help me adapt image size to the whole container.. i mean i want the image size to be taken by the container, not my image to be fit into it.. can someone help…
this is my website: https://hamsaradiance.com/
Hello @anumailme46
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> section-slide-show.css
add this code at the end of the file and save.
.slideshow .swiper-slide img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: fill !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Hi @anumailme46
I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there
Here is the code for Step 3:
.slideshow__image {
object-fit: contain !important;
}
Please let me know if it works. Thank you!
Best,
Daisy - Avada Support Team.
