调整窗口大小时，React组件背景图像不适合容器

Question

我遇到了背景图像不适合容器元素的问题。图像来自API调用，因此我只能在组件内部设置图像，然后在相应的CSS文件中添加样式。这张图片在桌面上显示得更好，但在较小的屏幕上却根本无法正常显示。

以下是我在GitHub页面上部署的应用程序的链接：Netflix克隆应用

当你点击单个电影并进入电影详细信息页面时，问题就来了。说明中的横幅和缩略图是问题所在。

`

useEffect( () => {
const getMovie = async () => {
const response = await fetch(`${baseUrl}/${params.id}?api_key=${APIKEY}`);
if (response.ok) {
const data = await response.json();
if (data !== null) {
setMovie(data);
}
} else {
const handleError = () => {
alert('Movie not found');
setTimeout( () => {
history('/');
}, 1000);
}
handleError();
}
}
getMovie();
}, []);

let moviePoster = movie.backdrop_path;

if (moviePoster == null) {
moviePoster = imageNotFound;
} else {
moviePoster = baseImageUrl + moviePoster;
}

return (
<div className="movie">
<div className="banner"
style={{ 
backgroundImage: `url("${moviePoster}")`
}}>

</div>
<div className="movie_details">
<div className="movie_image">
<img src={moviePoster} alt="Movie poster" />
</div>
<div className="movie_overview">
<h1>{movie?.name || movie?.title || movie?.original_title}</h1>
<h3>{movie?.tagline}</h3>
<p>{movie.overview}</p>
<div className="more_details">
<div>
<p>{movie.release_date && `Release Date: ${movie?.release_date}`}</p>
<p>{movie.genres && `Genres: ${movie?.genres.map( genre => ' ' + genre.name)}`}</p>
</div>
<div>
<p>{movie.runtime && `Runtime: ${movie?.runtime} minutes`}</p>
<p>{movie.vote_average && `IMDB Rating: ${movie?.vote_average}`}</p>
</div>
</div>
<button className="btn-back" onClick={() => history('/')}>Go Back</button>
</div>
</div>
</div>
)

`
`
.banner {
padding: 100px 10px;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 100vw;
max-width: 100%;
height: 100vh;
}
`

Answer 1

问题是，您将横幅设置为背景。如果窗口的格式错误，它会放大到图片的中间。

我会把div改成这样：

<img src="${moviePoster}" style="width: 100%">

这能解决你的问题吗？请在评论中告诉我。

Answer 2

试试这个CSS代码行。

.banner {
display: flex;
flex-direction: column;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 100vw;
max-width: 100%;
height: 100vh;
}
.banner__contents {
flex: 1;
}