ProjectDetailsModal's Image is not responsive / invalid aspect ratio

[cyberjj999]

Hello!

I noticed that while adding different images in project details modal, the aspect ratio of the image is not maintained and everything is stretched

I have tried to resolve the problem but to no avail

P.S. by hardcoding the height and width i managed to come up with something like this (but it obviously wont work when we resize the window cause its hardcoded)

Would appreciate any response! Thank you!

[cyberjj999]

Hi friends, it seems like this issue came from the AwesomeSlider (https://github.com/rcaferati/react-awesome-slider) found in ProjectDetailsModal.js

<AwesomeSlider
                cssModule={[AwesomeSliderStyles, AwesomeSliderStyles2]}
                animation="scaleOutAnimation"
                className="slider-image"
              >
                {img}
              </AwesomeSlider

Upon some research, I found a solution posted by another user (rcaferati/react-awesome-slider#147)
The solution is to add the code below into your CSS file

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

And wrap the AwesomeSlider in a div with the className = "slider-contain".

This will fix your error, giving you something like this

Hope this is helpful to someone!

[DavidMatalik]

Hey @cyberjj999: Your solution didn't work for me. But I found another way which is doing what I want.

1. Add height: 100%; to .foto img in App.scss.
2. Make sure to put images in the same width and height to this section