Best way to configure Reactstrap carousel images to be responsive

Question

I have done a lot of looking but there is suprisingly little documentation in regard to reactstrap carousel image responsiveness.

My ReactStrap carousel resizes responsively but the images do not.

Options I have researched/tried:

1. CSS via className in the carousel component itself? This is the one I thought might be best, but I haven't found a combination of background-size, height, and max-width that resizes the image properly.

2. srcset ? I'm not sure how to implement this or any other inline attribute, given that the carousel is a component

3. Perhaps some place in the carousel component itself?

4. Or is there a better way for me to modify the images?

5. Or is @media the answer via css?

`

const items = [
  {
    src: 'img1.png',
    altText: '',
    caption: ''
  },
  {
    src: 'img2.png',
    altText: '',
    caption: 'Freedom Isn\'t Free'
  },
  {
    src: 'img3.png',
    altText: '',
    caption: ''
  }
];

class HomeCarousel extends Component {
  constructor(props) {
    super(props);
    this.state = { activeIndex: 0 };
    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
    this.goToIndex = this.goToIndex.bind(this);
    this.onExiting = this.onExiting.bind(this);
    this.onExited = this.onExited.bind(this);
  }

  onExiting() {
    this.animating = true;
  }

  onExited() {
    this.animating = false;
  }

  next() {
    if (this.animating) return;
    const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
    this.setState({ activeIndex: nextIndex });
  }

  previous() {
    if (this.animating) return;
    const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
    this.setState({ activeIndex: nextIndex });
  }

  goToIndex(newIndex) {
    if (this.animating) return;
    this.setState({ activeIndex: newIndex });
  }

  render() {
    const { activeIndex } = this.state;

    const slides = items.map((item) => {
      return (
        <CarouselItem
          className="carouselImg"
          onExiting={this.onExiting}
          onExited={this.onExited}
          key={item.src}
        >
          <img src={item.src} alt={item.altText} />
          <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
        </CarouselItem>
      );
    });

    return (
      <Carousel
        activeIndex={activeIndex}
        next={this.next}
        previous={this.previous}
      >
        <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
        {slides}
        <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
        <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
      </Carousel>
    );
  }
}


export default HomeCarousel;

`

Answer 1

.carousel-item > img { 
  width: 100%; 
}

... will fix your problem.
And it has nothing to do with Reactstrap. That's probably why you didn't find much. Has to do with the TwBs Carousel alone. I personally don't see any reason why that rule is not part of TwBs carousel CSS, because everyone expects that <img> to have a width of 100% of its parent.

If you want to limit it to a particular carousel, modify the selector accordingly.

---

Another frequently requested TwBs carousel mod is:

.carousel-control-prev,.carousel-control-next {
  cursor:pointer;
}