Center Image inside slide

[jasperf]

We have autoHeight:false and centerImage: true, inside a slider image with height:100% and width:100% and margins set to 0.

element {
    width: 100%;
    height: 100%;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

The image (505x600px orginal size) is inside a sp-image-container with generated dimensions height: 400px; width: 641px;:

<div class="sp-image-container" style="height: 400px; width: 641px;">
<img data-v-3568e6ce="" src="/uploads/275/Logo/Flightcases/611d497f4769a.jpg" class="sp-image" 
data-default="/uploads/275/Logo/Flightcases/611d497f4769a.jpg" 
style="width: 100%; height: 100%; margin-left: 0px; margin-top: 0px;margin-bottom: 0px;">
</div> 

In a landscape sized slider and slide a portrait image is kind of squashed. And more importantly, we do not see it centered.

When I change height to auto the image is clear, but then the position is off. It is only partly shown that is. Only the top shows:

When we set the width to auto and height to a 100% I can see the entire image, but then the image and background only take up 50% of the width of the rectangular slider:

However, for the rectangular images that setting would cause the image to be partly cut at the right side. So for landscape this would be better:

element {
    width: 100%;
    height: auto;
    margin-left: 0px;
    margin-top: 0px;
}

but we still miss part of the slider here yet again:

How can I just center this portrait sized image in our landscape slider with it filling the size set for the slides?

[jasperf]

Do think we found an way to improve things for landscape as well as portrait images.

landscape

I do think if we can keep height:100% for landscape images and push image down with margin if need be. Margin zero works fine on a landscape slider however:

element {
    width: 100%;
    height: auto;
    margin-left: 0px;
    margin-top: 0px;
}

portrait

For portrait images we would need height:auto and a different margin-top on our rectangular shaped slider:

element {
    width: 100%;
    height: auto;
    margin-left: 0px;
    margin-top: -85px;
}

If we can do this per image / slide we will be doing much better. Only the images that do not have a similar aspect ratio to the slider itself will only be partly shown:

portrait width auto

To just show portrait scaled to fit slide, center it and have background cover slide I still cannot work out. I could do:

element {
    width: auto;
    height: 100%;
    margin-left: 25%;
    margin-top: 0px;
}

and have this:

<img data-v-3568e6ce="" src="/uploads/275/Logo/Flightcases/611d497f4769a.jpg" class="sp-image" 
data-default="/uploads/275/Logo/Flightcases/611d497f4769a.jpg" 
style="width: auto; height: 100%; margin-left: 25%; margin-top: 0px;">

but then my white background does not cover the full width of the slide.

portrait width auto and container bg color

If I however change the container background that would work:

<div data-v-3568e6ce="" class="sp-slide sp-selected" data-index="0" data-init="true" 
style="width: 641px; height: 400px; left: 651px;background: white;" data-loaded="true">
<div class="sp-image-container" style="height: 400px; width: 641px;">
<img data-v-3568e6ce="" src="/uploads/275/Logo/Flightcases/611d497f4769a.jpg" class="sp-image" data-default="/uploads/275/Logo/Flightcases/611d497f4769a.jpg" 
style="width: auto; height: 100%; margin-left: 25%; margin-top: 0px;">
</div> 
</div>
<div data-v-3568e6ce="" class="sp-slide sp-selected" data-index="1" data-init="true" 
style="width: 641px; height: 400px; left: 1302px;" data-loaded="true">
<div class="sp-image-container" style="height: 400px; width: 641px;">
<img data-v-3568e6ce="" src="/uploads/275/Logo/Flightcases/611d4959ccdbc.jpg" class="sp-image" data-default="/uploads/275/Logo/Flightcases/611d4959ccdbc.jpg" 
style="width: 100%; height: 100%; margin-left: 0px; margin-top: 0px;">
</div> 
</div>
<div data-v-3568e6ce="" class="sp-slide" data-index="2" data-init="true" 
style="width: 641px; height: 400px; left: 0px;" data-loaded="true">
<div class="sp-image-container" style="height: 400px; width: 641px;">
<img data-v-3568e6ce="" src="/uploads/275/Logo/Flightcases/611d4967550e8.jpg" class="sp-image" data-default="/uploads/275/Logo/Flightcases/611d4967550e8.jpg" 
style="width: 100%; height: 100%; margin-left: 0px; margin-top: 0px;">
</div> 
</div>

And then I still have the thumbnails that could be improved..

[jasperf]

Hmm, it seems we are having a tough time setting margins and dimensions per individual image slide. Any suggestions there or is this just not possible?

[davidghi]

Hi,

I would recommend using the slider's settings instead of CSS when possible, because CSS, especially inline styles, are overwritten sometimes by the slider. If I understand correctly, you're trying to get the image to be fully visible inside the slider and centered. For this, you would just need to set the imageScaleMode to contain.

Best, David

[jasperf]

@davidghi . Thanks a lot for getting back so fast. We are just now trying to work with imageScaleMode contain and then set the slide container to a color to match the image background color. Were trying to do it all the hard way and this more native Slider Pro way seems to be the way to go. Thanks again David.

[davidghi]

You're welcome!