How to "fit" image to div

[kyzcreig]

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?

[David Martin – Support]

Hi,

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;
}
}

[kyzcreig]

Cool, that did work for the main image. Can we do something similar for the thumbnails?

[Kyle – SUPPORT]

Unfortunately the thumbnails are cropped, so even changing the widths/heights via css would still display the same image

– Kyle

[kyzcreig]

From 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 div

Source: https://irc.bio/product/ibutamoren/

[David Martin – Support]

I 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;
}

[kyzcreig]

Is 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.

[David Martin – Support]

To 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%);
}