1

我已经做了很多查找，但是关于 reactstrap 轮播图像响应性的文档非常少。

我的 ReactStrap 轮播响应式调整大小，但图像没有。

我研究/尝试过的选项：

  1. CSS通过轮播组件本身的className？这是我认为可能最好的一个，但我还没有找到适当调整图像大小的背景大小、高度和最大宽度的组合。

  2. srcset ? 鉴于轮播是一个组件，我不确定如何实现这个或任何其他内联属性

  3. 也许在轮播组件本身的某个地方？

  4. 还是有更好的方法让我修改图像？

  5. 或者@media 是通过 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;

`

4

4 回答 4

6

美好的一天，你好，

我已经在我的 reactjs 应用程序中使用 Carousel 组件尝试了这个 reactstrap。我通过添加引导程序 4 类“d-block w-100”解决了这个问题。

我在我的 reactstrap Carousel 组件和这个元素中创建了这个

由此：

<img src={item.src} alt={item.altText} />

我改为：

<img className="d-block w-100" src={item.src} alt={item.altText} />

我刚刚从 bootstrap 4 文档https://getbootstrap.com/docs/4.0/components/carousel/复制了这些类（d-block w-100）

这是我将 Reactstrap Carousel 与来自我的 WordPress Rest API 数据的动态数据一起使用的示例。 https://github.com/jun20/React-JS-and-WP-Rest-API/tree/home-carousel-final

于 2018-08-15T02:18:05.670 回答
4 
.carousel-item > img { 
  width: 100%; 
}

...将解决您的问题。
而且它与 Reactstrap 无关。这可能就是你没有找到太多的原因。仅与 TwBs Carousel 有关。我个人不认为该规则不是 TwB 轮播 CSS 的一部分的任何原因，因为每个人都希望它具有其父<img>级的宽度。100%

如果您想将其限制为特定的轮播，请相应地修改选择器。

另一个经常被要求的 TwBs 轮播模式是：

.carousel-control-prev,.carousel-control-next {
  cursor:pointer;
}
于 2018-04-05T21:35:32.777 回答
1

鉴于 bootstrap 使用 flexbox，您可以通过将其添加到您的 css 来使 reactstrap 轮播图像响应：

.carousel-item, .carousel-item.active {
    align-items:center;
}

这似乎可以防止图像高度拉伸。为我工作！

于 2018-10-18T17:32:06.983 回答
0

基于此页面上的 reactstrap 轮播示例 1 https://reactstrap.github.io/components/carousel/

以下是我如何让它在我的用例中响应：

        <CarouselItem
          onExiting={() => setAnimating(true)}
          onExited={() => setAnimating(false)}
          key={item.src}
        >
          <img src={item.src} alt={item.altText} style={{ width: "100%"}}/>
          <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
        </CarouselItem>

因此，传递style={{ width: "100%"}}给img标签，使我的超大图像完全适合屏幕，并且可能适用于来到这里的其他人。

于 2020-10-28T00:22:20.230 回答