我有一個問題，背景影像在容器元素中不合適。該影像來自 API 呼叫，因此我只能在組件內設定影像，然后在相應的 CSS 檔案中添加樣式。影像在桌面上顯示得更好，但在較小的螢屏上根本不正確。
這是我在 GitHub 頁面上部署的應用程式的鏈接： Netflix Clone App
當您單擊單個電影并轉到電影詳細資訊頁面時，問題就會出現。描述中的橫幅和縮略圖是問題所在。
`
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;
}
`
uj5u.com熱心網友回復：
問題是，您將橫幅設定為背景。如果視窗格式錯誤，它會放大到圖片的中間。
我會將 div 更改為這樣的：
<img src="${moviePoster}" style="width: 100%">
這能解決您的問題嗎？在評論中告訴我。
uj5u.com熱心網友回復：
試試這個 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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/359305.html
標籤：javascript html css 反应 反应钩子
下一篇：div父級如何自動調整其大小？