如果图像不够宽，如何使其拉伸到 window 的宽度？

Question

The image is fine if it's not full screen , but with full screen , there's a white area on the right (probably because the image is not large enough).图片不是全屏就很好，但是全屏时，右边有一个白色区域（可能是图片不够大）。 How do I make the image automatically stretch so that its width covers the full screen?如何使图像自动拉伸以使其宽度覆盖整个屏幕？

CSS (see.landingImage): 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(built using nextjs): 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>

tried width: 100% also didn't work尝试过 width: 100% 也没有用

Answer 1

from the doc从文档

When using layout='fill', the parent element must have position: relative使用 layout='fill' 时，父元素必须有 position: relative

This is necessary for the proper rendering of the image element in that layout mode.这是在该布局模式下正确渲染图像元素所必需的。

What can you do is:你能做的是：

CSS: CSS：

add relative to the landingImage class and remove margin auto添加relative对于landingImage class 并删除边距auto

.landingImage {
  z-index: 0;
  background-size: cover;
  top: 0;
  padding: 0;
  display: block;
  width: 100vw;
  position: relative;
}

Wrap Image on the div将图像包装在 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