下一个 JS 图像居中而屏幕尺寸增加

Posted 2023-03-06

【中文标题】下一个 JS 图像居中而屏幕尺寸增加

【英文标题】：Next JS image centering while screen size increases

【发布时间】：2021-04-02 08:26:42

【问题描述】：

我在使用 NextJS 的 Image 组件时遇到了困难。 我想设置横幅图像。无论屏幕大小如何，此图像在任何时候都只能覆盖屏幕上的一定空间。我已经得到这个主要使用max-height: 30vh 和overflow: hidden 的组合。但是，当屏幕尺寸发生变化时，我似乎无法让图像居中。它应该从看到整个图像到专注于床上而有所不同。相反，它专注于图片的天花板。

现场样例：https://codesandbox.io/s/nextjs-image-layout-lc7vb?file=/src/pages/index.tsx

const Index = (props: IBlogGalleryProps) => (
  <Main
    ...
  >
    <div className="w-full overflow-hidden" style= maxHeight: '30vh' >
      <Image   layout="responsive" src="https://images.unsplash.com/photo-1519494080410-f9aa76cb4283?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" />
    </div>
    ...
  </Main>
);

【问题讨论】：

不是我的反对意见，但我想这是因为您发布了一个完整的项目，而没有太多关于在哪里寻找的指导。我对 NextJS 不熟悉——也许如果你知道的话，你的问题出在哪里很明显，但潜入其中有几十个文件。

@SandyGifford 我更新了链接以重定向到相关页面并粘贴了相关代码。它最有可能是我需要调整的 CSS，但我似乎不知道如何调整。

那是我所有的复选框

【参考方案1】：

如果您想根据需要对齐图像，您应该使用layout="fill" 和例如。 objectFit="cover".

next/image API Reference

填充时，图像将宽度和高度都拉伸到父元素的尺寸，通常与 object-fit 配对。

为此，容器需要一个高度和position: relative。

如果您不想要 CSS 的默认 object-position: 50% 50%，也可以设置 objectPosition。

这应该可以解决问题：

const Index = (props: IBlogGalleryProps) => (
  <Main
    ...
  >
    <div className="w-full overflow-hidden relative" style= height: '30vh' >
        <Image layout="fill" objectFit="cover" src="https://images.unsplash.com/photo-1519494080410-f9aa76cb4283?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" />
    </div>
    ...
  </Main>
);

这是一个工作示例：https://codesandbox.io/s/nextjs-image-layout-forked-82op5?file=/src/pages/index.tsx

【讨论】：

这正是我想要的。我最近发现了这个功能，但打字稿一直在抱怨。没有意识到我必须删除决议。谢谢！

感谢您的解释！！这对我很有帮助！

【参考方案2】：

<div
     style="
            height: 30vh;
            width: 100%;
            max-width: 800px;
            position: relative;
            background-image: url('/imagelink/image.jpg');
            background-position: center center;
            background-size: cover;
            ">

</div>

您可以使用div 并为其设置背景。 你所谓的固定在床上是用background-position标签完成的。

但您也可以将object-fit 和object-position 用于<img/> 标记。 像这样：

object-fit: cover;
object-position: center;

这将使您的图像始终为 <img/> 框大小的 100% 宽度和高度，并将其居中。

【讨论】：

如果我不需要使用Image 组件，我会使用类似的解决方案，但我确实需要使用它。