Nuka slider adding 100% width stretches my images in react

Question

I have a carousel with six images that runs infinite using Nuka Carousel And when i see the images on the page they are stretched on the width. After looking in the console i found that nuka slider class adds 100% width to images and disabling it fixes the images.

.slider-slide > img {
    width: 100%;
    display: block;
}

is there a way to disable the width so the images won't be stretched?

Answer 1

My solution is as follows. The images don't stretch in full screen.

img.your-class-name {
  background-repeat: no-repeat;
  min-width: 100%;
  width: 100%;
  height: 100%;
}

Answer 2

I had this for ages too. Really frustrating. I was using emotion and CSS Grid. So in my case I first made sure I got the demo working by doing this:

1. Make a component for the slider

2. Set up the demo code inside the component as is

3. convert CSS - In my case: import { css } from "react-emotion", then convert the style={{ tags into className={css`

4. add a view-port based limit using the %vw; in my case I have a 5% gutter down the side so I limited to 90vw (90% of viewport), as follows

  <div className={css` width: 90vw; margin: auto; `}> <Carousel> // demo code </Carousel> 

Depending on your libs and surrounding css, you will need to vary this approach. I am basically making sure the CSS is all processed at the same time, by the same tool, so it's not compiled in some weird order. Then I'm limiting the div width that contains the carousel. It's twitchy AF - I broke it several times by adding unrelated CSS - and I'm using emotion which prefixes CSS, so it made no sense but hey, that's the joy of CSS.