如果图像不够宽，如何使其拉伸到窗口的宽度？答案

【问题标题】：If image is not wide enough, how to make it stretch to the width of the window?如果图像不够宽，如何使其拉伸到窗口的宽度？
【发布时间】：2022-01-15 19:37:46
【问题描述】：

图片如果是not full screen就好了，但是with full screen，右边有一个白色区域（可能是图片不够大）。如何让图片自动拉伸，使其宽度覆盖全屏？

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>

尝试过的宽度：100% 也没有用

【问题讨论】：

我对 Next.JS 中的布局不太熟悉，但它看起来好像是在 HTML 标题标签中加载图像组件？那是对的吗？如果这是正确的 JSX 或 HTML 结构，它应该在您的 body 标记内。
@DOZBORNE 它既不在头部内部，也不在身体内部。我没有把它放在身体 bc 它给了我图片左右两侧的边距，我不知道如何摆脱

标签： javascript html css image next.js

【解决方案1】：

来自doc

当使用 layout='fill' 时，父元素必须有位置：相对

这是正确渲染图像元素所必需的那种布局模式。

你能做的是：

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>

【讨论】：

谢谢！现在图像填充了我想要的宽度，但它的高度也成比例地增长。有没有办法保持原来的高度？
您可以将对象从cover 更改为fill。如果这有帮助，请不要忘记将我标记为答案
将对象从覆盖更改为填充仍然使高度增长...您知道有什么方法可以将高度变为原始高度并拉伸图像吗？:(