Digital experiences for all disciplines
New Landing › How can we help? › Atelier › How to "fit" image to div
New Landing › How can we help? › Atelier › How to "fit" image to div
- This topic has 7 replies, 3 voices, and was last updated 8 years by David Martin – Support.
-
Posted in: Atelier
-
July 14, 2016 at 4:00 am #281138
I’d like to fit my product image and thumbnails to their li/divs even when the browser isn’t full width:
http://irc.bio/product/ibutamoren/full-width:
not full-width:
I think it needs to be styled correctly in CSS. I’m currently using some custom CSS to make the thumbnails look better but it’s not enough.
/* * Fix for Shop Left Thumbnail Slider Vertical Align **/ /*ul.slides { */ .lSSlideOuter li { display: flex; /*align-items: center;*/ } .lSSlideOuter.vertical .lSPager.lSGallery li img { height: 100% !important; height: auto !important; width: auto !important; /*max-height: 100% !important;*/ /*max-width: 100% !important;*/ } .lSSlideOuter li img { margin: auto;; } .lSSlideOuter li img { max-height: 100%; max-width: 100%; }
Can you help me auto-scale and fit to center my product images and thumbnails?
July 15, 2016 at 2:25 pm #281550Hi,
This is rather difficult using that particular slider/width/height setting you are using.
I am having this result using this CSS:
@media (min-width: 768px) { .lSSlideOuter.vertical .lightSlider>li>img, .lSSlideOuter.vertical .lightSlider>li>img.wide { max-width: initial; transform: none; left: auto; position: relative; height: initial!important; width: 100%!important; } }
July 16, 2016 at 9:55 am #281747Cool, that did work for the main image. Can we do something similar for the thumbnails?
July 18, 2016 at 8:24 am #281857Unfortunately the thumbnails are cropped, so even changing the widths/heights via css would still display the same image
– Kyle
July 18, 2016 at 9:37 am #281883From what I can see the images are not cropped and they can be rescaled. I changed the width and the thumnail is the right size. The problem is it’s not vertically centered:
See above, no cropping
See above, perfect size but not vertically centered in divJuly 18, 2016 at 6:51 pm #282081I think the end result for the thumbnail would be tiny. You could test this:
.woocommerce.product-shadows.product-standard #product-img-slider .lSPager.lSGallery li { background-color: transparent!important; box-shadow: none!important; } .lSSlideOuter.vertical .lSPager.lSGallery li img { width: 100% !important; }
July 21, 2016 at 12:59 pm #282969Is it not possible to keep the background color and vertically center the image in the li element? I had it working before one of the theme patches.
July 22, 2016 at 1:47 pm #283288To an extent using CSS, yes:
.woocommerce.product-shadows.product-standard #product-img-slider .lSPager.lSGallery li { background-color: #F9FAFB!important; position: relative; } .lSSlideOuter.vertical .lSPager.lSGallery li img { width: 100% !important; top: 50%; left: 0; position: absolute; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
-
Posted in: Atelier
You must be logged in and have valid license to reply to this topic.