Image height broken

[SeanPedersen]

Just tried out react-awesome-slider and found out that it sadly breaks my images displaying them vertically too small. It fits my parent div containers width but fails to fill the correct image height (desired behavior: Fit awesome-slider height to keep original image aspect ratio).

I deal with currently like this:

<AwesomeSlider style={{ "--slider-height-percentage": "120%" }}
                                media={
                                    image_urs.map((e) => { return { "source": e } })
                                }
                            />

That helps a little bit but is still far from fixing it correctly.

I am aware of the following three issues with similar problems: #146, #101, #147. I expected this functionality to work straight out of the box for an awesome image slider. Anyone aware of a proper fix?

At #147 I stumbled upon following suggestion, fixing the css:

.slider-contain > .awssld > .awssld__wrapper > .awssld__container > .awssld__box > .awssld__content > img {
  object-fit: contain;
}

But it makes matters worse for me, it display images with correct aspect ratios but not 1 but 2 at the same time (vertically stacked). So not a fix.

Hope anyone has an idea how to mitigate this issue.

[trolit]

I expected this functionality to work straight out of the box for an awesome image slider.

Did you visit CSS Customizer? If you manipulate slider-height-percentage property, you will see that react awesome slider doesn't maintain aspect ratio but instead cuts what is seen.

But it makes matters worse for me, it display images with correct aspect ratios but not 1 but 2 at the same time (vertically stacked).

I had similiar problem, and it seems that not only me. Before I've used scss file, I wanted to fix image ratio using CSS only but when I overrode the image rule that sets width and height to 100%, it broke slider and I assume that it was due to other applied rules that were cleared because of my override.

So I see 2 approaches here if you really want to make this work as you want.

1. Create your own instance of slider styles in scss file and override them to your needs. I mentioned it here
2. Supply slider with images in specific resolution like in CSS Customizer here. For slider-height-percentage set somewhere around 56%, image is fully visible, even when window is resized and there is no uncovered space in slider container. But in this case you will need to play with images resolutions and slider-height-percentage. Note that there also might be a situation where your images will require some cutting or stretching to achieve behaviour like in provided CSS Cutomizer example.

[SeanPedersen]

Hey thanks for the providing suggestions how to fix the problem.

Based on your hints I came up with following work-around:

import "react-awesome-slider/dist/styles.css"
import "./fixSlider.css"

...

<AwesomeSlider style={{ "--slider-height-percentage": "120%", "--slider-transition-duration": "200ms" }}
                                    fillParent={false}
                                    media={
                                        [{ "source": img_url }]
                                    }
                                />

fixSlider.css:

.awssld > .awssld__wrapper > .awssld__container > .awssld__box > .awssld__content > img {
    object-fit: contain;
  }

This keeps the images aspect ratio but leaves gray padding within the slider depending on the current images aspect ratio. So still not optimal but it is ok. Perfect would be in my book if AwesomeSlider would fit the width of the parent (what it does already) and also adjust its height based on the current image aspect ratio (fitting image to parent width and then fitting AwesomeSlider height to aspect ratio preserving new image height).

[trolit]

Good to hear that you somehow resolved this 😄 However I must mention(like in previous thread) that the approach with fixSlider didn't work for me, unless I explicitly put reference to imported css to cssModule property but this caused very odd behaviour. Maybe because of Docusaurus2 starter that I've used... Anyway, are you sure you need that fillParent={false} statement? According to the documentation it's set on false by default. Greetings :)

[SeanPedersen]

Hmm ok no clue what is up with that on your side... Yes you are right the fillParent is old garbage left over after trying various things out. 🗡️