如果圖像不夠寬，如何使其拉伸到 window 的寬度？

Question

圖片不是全屏就很好，但是全屏時，右邊有一個白色區域（可能是圖片不夠大）。 如何使圖像自動拉伸以使其寬度覆蓋整個屏幕？

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% 也沒有用

Answer 1

從文檔

使用 layout='fill' 時，父元素必須有 position: relative

這是在該布局模式下正確渲染圖像元素所必需的。

你能做的是：

CSS：

添加relative對於landingImage class 並刪除邊距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>

如果圖像不夠寬，如何使其拉伸到 window 的寬度？

問題描述

1 個解決方案

解決方案1
0 已采納 2022-01-15 21:24:22

如果圖像不夠寬，如何使其拉伸到 window 的寬度？

問題描述

1 個解決方案

解決方案1 0 已采納 2022-01-15 21:24:22

解決方案1
0 已采納 2022-01-15 21:24:22