title: Best way to configure Reactstrap carousel images to be responsive
body: <p>I have done a lot of looking but there is suprisingly little documentation in regard to reactstrap carousel image responsiveness. </p>
  
  <p>My ReactStrap carousel resizes responsively but the images do not. </p>
  
  <p>Options I have researched/tried:</p>
  
  <ol>
  <li><p>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.</p></li>
  <li><p>srcset ? I'm not sure how to implement this or any other inline attribute, given that the carousel is a component</p></li>
  <li><p>Perhaps some place in the carousel component itself?</p></li>
  <li><p>Or is there a better way for me to modify the images?</p></li>
  <li><p>Or is @media the answer via css?</p></li>
  </ol>
  
  <p>` </p>
  
  <pre><code>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) =&gt; {
        return (
          &lt;CarouselItem
            className="carouselImg"
            onExiting={this.onExiting}
            onExited={this.onExited}
            key={item.src}
          &gt;
            &lt;img src={item.src} alt={item.altText} /&gt;
            &lt;CarouselCaption captionText={item.caption} captionHeader={item.caption} /&gt;
          &lt;/CarouselItem&gt;
        );
      });
  
      return (
        &lt;Carousel
          activeIndex={activeIndex}
          next={this.next}
          previous={this.previous}
        &gt;
          &lt;CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} /&gt;
          {slides}
          &lt;CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} /&gt;
          &lt;CarouselControl direction="next" directionText="Next" onClickHandler={this.next} /&gt;
        &lt;/Carousel&gt;
      );
    }
  }
  
  
  export default HomeCarousel;
  </code></pre>
  
  <p>`</p>