对轮播与图像溢出进行反应

Question

当前正在使用带有返回图像数组的api的React Side项目。当前与第三方“轮播”有问题，我的图像调整为屏幕大小，但溢出。我尝试过

  height: auto;
  flex: 1;
  object-fit: cover;
  height: 100%;

这里有React组件

`import React from 'react'
// import Carousel from '@brainhubeu/react-carousel'
// import '@brainhubeu/react-carousel/lib/style.css'
import Carousel from 'nuka-carousel'

const headerImages = (props) => {
  const imageResults = props.trending.slice(0, 5).map(r => (
    <img key={r.id} src={`https://image.tmdb.org/t/p/w1280${r.backdrop_path}`} alt={r.title} className='header-image' />
  ))
  return <div className='header-images'>
    <Carousel>{imageResults}</Carousel>
  </div>
}

export default headerImages

`

问题也与其他“轮播”相同。

以下是一些屏幕截图：

您可以看到那里只有当我向下滚动时才会出现白色（溢出）

Answer 1

.App {
  overflow: hidden;
}

这解决了问题