css - react js 轮播和位置

Question

你好，我有一个旋转木马，但我在根据旋转木马的大小将图像 100% 保留时遇到问题

const ImageCarousel = () => (
  <CarouselProvider
  totalSlides={3}
  naturalSlideWidth={1}
  naturalSlideHeight={1.25}
  dragEnabled={false}
  touchEnabled={false}
  style={{ height: "500",position: "relative"}}
  >
    <Slider style={{maxHeight:'500px', width:'100%'}}>
      <Slide tag="a" index={0}>
        <Image  src="https://lorempixel.com/800/800/cats/0" />
      </Slide>
      <Slide tag="a" index={1}>
        <Image src="https://lorempixel.com/800/800/cats/1" />
      </Slide>
      <Slide tag="a" index={2}>
        <Image src="https://lorempixel.com/800/800/cats/2" />
      </Slide>
    </Slider>
    <Container style={{position: 'relative', backgroundColor:'#000'}}>
    <ButtonBack style={{position: 'absolute', transform: 'translate(-50%,-50%)', backgroundColor: 'transparent', border: 0}}><Icon fitted name='arrow right' size='big' /></ButtonBack>
    <ButtonNext style={{position: 'absolute', transform: 'translate(-50%,-50%)', backgroundColor: 'transparent', border: 0}}><Icon fitted name='arrow left' size='big' /></ButtonNext>
    </Container>
  </CarouselProvider>
);

现在我有这个:

Answer 1

您好，这个容器应该有一个宽度。

1- 在 ImageCarousel.js 的同一文件夹中创建一个名为“ImageCarousel.css”的 css 文件，并将代码放在下面:

.innterClass {
    height: 500px !important;
}

2-导入代码ImageCarousel.js

import "./ImageCarrousel.css";

3- 这是您的 ImageCarousel 组件中应该包含的代码:

const ImageCarousel = () => (
  <CarouselProvider
  totalSlides={3}
  naturalSlideWidth={1}
  naturalSlideHeight={1.25}
  dragEnabled={false}
  touchEnabled={false}
  style={{ height: "500",position: "relative"}}
  >
    <Slider style={{maxHeight:'500px'}}>
      <Slide innerClassName="innterClass" index={0}>
        <Image style={{objectFit: "cover"}}  src="https://lorempixel.com/800/800/cats/0" />
      </Slide>
      <Slide innerClassName="innterClass" index={1}>
        <Image style={{objectFit: "cover"}}  src="https://lorempixel.com/800/800/cats/1" />
      </Slide>
      <Slide innerClassName="innterClass" index={2}>
        <Image style={{objectFit: "cover"}}  src="https://lorempixel.com/800/800/cats/2" />
      </Slide>
    </Slider>
    <ButtonBack style={{position: 'absolute',top:'50%',left:'30%' ,transform: 'translate(-50%,-50%)', backgroundColor: 'transparent', border: 0}}><Icon fitted name='arrow right' size='big' /></ButtonBack>
    <ButtonNext style={{position: 'absolute', right:'30%', top: "50%", transform: 'translate(-50%,-50%)', backgroundColor: 'transparent', border: 0}}><Icon fitted name='arrow left' size='big' /></ButtonNext>

  </CarouselProvider>
);