How to make image to fit a div inside component of react-slideshow-image

Asked Nov 21 '21 at 10:53

Active Nov 21 '21 at 18:25

Viewed 1,150 times

Im trying to make image to fit a div. Im using react-slideshow-image.

this is the CodSandbox : https://codesandbox.io/s/react-slide-imageshow-heightproblem-mforb?file=/src/App.js

return (
      <div className="App">
        <div style={{ width: "30%", height: "70px" }}>
          <Slide ref={this.slideRef} {...properties}>
            {slideImages.map((each, index) => (
                <img style={{ objectFit: 'contain', height : '100%'}} src={each} key={index} alt="sample" />
            ))}
          </Slide>
        </div>
      </div>

I want the images to fit the div , so i can make the div responsive. if the div height is 70px, so the images inside it will also be the same height:70px

I have tried this How to make an image fit the carousel?.

I have noticed that the <Slide > add divs so i looked at the docs and saw that you can add a property called cssClass that gets a string:

Use this prop to add your custom css to the wrapper containing the sliders. Pass your css className as value for the cssClass prop

but it doesnt seems to work and i didnt found any examples for it.

edited Nov 21 '21 at 18:25

asked Nov 21 '21 at 10:53

Amit Hagag

1

What would help a lot would be if you add your rendered HTML. – Azu Nov 21 '21 at 13:42
Sorry, somehow the sandbox was deleted. here i have fixed it. – Amit Hagag Nov 21 '21 at 13:57
1

The problem comes from this line `
`. You need to remove `width:30%` and it will work okay.
– Azu Nov 21 '21 at 16:44
Changing the line `
` doesn't help @Azu
– Amit Hagag Nov 21 '21 at 17:55
1

I'm looking at your codesandbox code. If I remove `widht:30%` of the div directly in `div.App`, the images cover the whole width. – Azu Nov 21 '21 at 18:02
But the height is also the problem. i want the images to be, lets say `height: 70px` @Azu – Amit Hagag Nov 21 '21 at 18:24
1

I think the height comes from the Javascript. I tried to turn off the CSS properties but they appear again. Try to read the documentation of that slideshow library. – Azu Nov 21 '21 at 18:54
i have read the docs, and i got into the `cssClass` , and i think this is the only option for that but there are no examples for it – Amit Hagag Nov 22 '21 at 21:31
1

Does it say how to control height? – Azu Nov 22 '21 at 22:05
no, the document doesnt say how to handle height – Amit Hagag Nov 23 '21 at 11:12
1

I've found a div which can control the width and the height of the slider. It's `.react-slideshow-container`. You can give it width and height you wish:) Good luck!!! – Azu Nov 23 '21 at 16:00
it worked ! thank you ! – Amit Hagag Nov 23 '21 at 19:12

How to make image to fit a div inside component of react-slideshow-image

0 Answers0