react-responsive-carousel: how to give fixed height to thumb?

Question

I gave a fixed height to the image. but the problem is now, the height is also applied in thumbs. How can I prevent this?

<Carousel width="600px" dynamicHeight={false}>
  {data?.book?.images.map((image, i) => (
    <img src={image} alt={`${i}`} className="h-128" />
  ))}
</Carousel>;

Answer 1

You can wrap the image by a div. and give that div a fixed height. after that, on image, you can give height:100%. In this way, height will apply only on the image. It will not apply on thumbs.

<Carousel width="600px" dynamicHeight={false}>
  {data?.book?.images.map((image, i) => (
    <div className="h-128">
      <img src={image} alt={`${i}`} className="h-full" />
    </div>
  ))}
</Carousel>;