时间戳

首页 > 解决方案 > 用溢出的图像反应轮播

css - 用溢出的图像反应轮播

问题描述

目前正在处理一个反应端项目，该项目有一个返回图像数组的 api。目前遇到第三方轮播的问题，我的图像调整到屏幕大小但溢出。我努力了

  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

`

不同的轮播也存在相同的问题。

这是一些屏幕截图：第一 第二 第三 在此处输入图像描述

如您所见，那里有一些白色（溢出），仅在我向下滚动时才出现

标签： cssreactjscarousel

解决方案

.App {
  overflow: hidden;
}

这解决了这个问题

推荐阅读