Images are cropped

[BruceWheaton]

Hey - just started to use the component, but it's expanding my images and cropping them - looks like top center positioning and about a 5-7% increase in size.

Is there an adjustment for this? [EDIT - It appears that the fillParent prop makes images fill the container. It's not clear to me what sets the size in the absence of that prop. It should probably be on by default?)

[trolit]

Hi @BruceWheaton. I managed to adjust this by overwriting scss files.

Create your own style file and put there combined data from react-awesome-slider node_modules package: styles.scss and constants.scss and follow steps listed below.

Image is cropped due to object-fit property used in styles.scss for image.

// Note: below code starts at line 101 in default file
> img,
> video {
  object-fit: cover;    <------
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

So if you

1. Add SASS compiler to your project, npm install node-sass
node-sass is deprecated, use Dart Sass npm install sass (https://sass-lang.com/)

2. Import scss file.

import AwesomeSliderStyles from './yourPath/awesomeSliderCustomStyles.scss';

3. Assign it to AwesomeSlider (in my case AutoplaySlider)

<AutoplaySlider
   // ... blabla
   cssModule={AwesomeSliderStyles}
>

..and remove that object-fit: cover; line, you won't have crops. However image will be stretched, because there is 100% on both properties(width and height). If you don't want to play with images, I suggest removing one of these properties. I removed height property and left the rest as below:

> img,
> video {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

Now you won't have ugly stretches, but presumably images are not filling whole slider container. To fix this adjust your slider height with slider-height-percentage constant. Find the best value for your slider. I changed mine from 60% to 50% and received this:

No crops, no stretches :)
Hope it helps 😄

PS:
In practice result looks like this: https://os-expected.github.io/EzGitDoc-documentation/

[chhz1]

Changing things in the node modules seems like a not optimal way. When you are working in a team using git, node_modules are ignored most of the time. It's a lot of work as well.
I found a different solution:
I build a custom css class, which overrides the property set in the styles.css in node_modules.

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

Simply put a div around the slider and apply this class

[trolit]

Changing things in the node modules seems like a not optimal way. When you are working in a team using git, node_modules are ignored most of the time. It's a lot of work as well.

I fully agree @chhz1 :) I have tried your solution. Sadly it didn't work for me as expected. Steps I did:

1. Took default scss from RAS, compiled it, removed scss reference and added import 'react-awesome-slider/dist/styles.css';
2. Added custom css class you've mentioned.
3. Wrapped slider with class from solution.
   result: Any rules inserted into that class doesn't apply(even with !important override).
4. Removed .slider-contain to instantly reference .awssld class
   result: no effect
5. Removed slider wrapper and added reference to styles to slider's cssModule attribute
   result: styles from custom class are applied. Image is fully visible. However it breaks slider. Delay indicator, arrows are not working as expected and when next image is loaded, instead of overwriting current one, slider creates new instance of image below and stops working.

[chhz1]

That's quite interesting.
My code looks like this
import 'react-awesome-slider/dist/styles.css';

<AutoplaySlider 
    //some settings
>
    <div data-src={...}/>
    ...
</AutoplaySlider>

and I am using the slider as follows:

<div className='gradient w-full h-auto slider-contain'>
    {slider}
</div>

which gives my the following result:

using the same code without slider-contain results in

Due to cropping the top of the picture is missing.

[trolit]

I've shortened the custom class to this:

.awssld__content > img {
  object-fit: contain;
}

And it finally worked when combining with cssModule attribute

import styles from './styles.module.css';
import 'react-awesome-slider/dist/styles.css';

<AutoplaySlider
  cssModule={styles}
>
  <div data-src="..." />
</AutoplaySlider>

However with this result I can't overwrite basic class .awssld for my needs. I think it'll be simpler if I make scss file, add it to the project and leave node_modules untouched 😄

[DeepakKapiswe]

Anyone, can you please suggest most simplest solution to this problem ?

[DeepakKapiswe]

Thanks @trolit your solution ^^ above worked for me, while idk why @chhz1 's solution didn't worked even when I followed all the steps mentioned. Btw Thanks guys. Its wierdy hack and should be fixed for betterment.

[cyberjj999]

Changing things in the node modules seems like a not optimal way. When you are working in a team using git, node_modules are ignored most of the time. It's a lot of work as well.
I found a different solution:
I build a custom css class, which overrides the property set in the styles.css in node_modules.

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

Simply put a div around the slider and apply this class

CHEERS MY MAN IT WORKS!!