1

我一直很难使用 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 width="300" height="200" 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>
);
4

2 回答 2

7

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

下一个/图像 API 参考

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

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

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

这应该可以解决问题：

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

于 2020-12-24T01:27:09.543 回答
-1 
<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>

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

但您也可以使用object-fitandobject-position作为<img/>标签。像这样：

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

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

于 2020-12-23T18:18:38.610 回答