-
Notifications
You must be signed in to change notification settings - Fork 296
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Images are cropped #147
Comments
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: Image is cropped due to // 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
import AwesomeSliderStyles from './yourPath/awesomeSliderCustomStyles.scss';
<AutoplaySlider
// ... blabla
cssModule={AwesomeSliderStyles}
> ..and remove that > 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 No crops, no stretches :) PS: |
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.
Simply put a div around the slider and apply this class |
I fully agree @chhz1 :) I have tried your solution. Sadly it didn't work for me as expected. Steps I did:
|
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 |
Anyone, can you please suggest most simplest solution to this problem ? |
CHEERS MY MAN IT WORKS!! |
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?)
The text was updated successfully, but these errors were encountered: