圖片不是全屏就很好，但是全屏時，右邊有一個白色區域（可能是圖片不夠大）。如何使影像自動拉伸以使其寬度覆寫整個螢屏？
CSS（參見 .landingImage）：
.body {
margin: 0px, 50px;
}
.home {
margin-left: 20px;
margin-right: 20px;
padding: 5px 5px;
}
.landingImage {
z-index: 0;
background-size: cover;
top: 0;
padding: 0;
display: block;
margin: 0 auto;
width: 100vw;
}
index.js（使用 nextjs 構建）：
<Head>
...
</Head>
<div id="wrapper">
<Image className={indexStyles.landingImage} src={orcas} />
</div>
<div className={indexStyles.home}>
<Head>
<meta
name="viewport"
content="width=device-width, initial-scale=1"
></meta>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
></link>
</Head>
<body>
...
</body>
</div>
嘗試過 width: 100% 也沒有用
uj5u.com熱心網友回復：
從檔案
使用 layout='fill' 時，父元素必須有 position: relative
這是在該布局模式下正確渲染影像元素所必需的。
你能做的是：
CSS：
添加relative到landingImage類并洗掉邊距auto
.landingImage {
z-index: 0;
background-size: cover;
top: 0;
padding: 0;
display: block;
width: 100vw;
position: relative;
}
將影像包裝在 div 上
<div className='landingImage '>
<Image
layout='fill' // required
objectFit='cover' // change to suit your needs
src='orcas' //
/>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/411381.html
標籤：
上一篇：接近div底部時逐漸減小JS值