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

Question

我在使用 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>
);

Answer 1

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

next/image API Reference

When fill, the image will stretch both width and height to the dimensions of the parent element, usually paired with 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