是否使用CSS网格全出血布局获取"next/image"

Question

我正在努力学习本教程。

这是TL；DR：

.grid--wrapper {
display: grid;
grid-template-columns: 1fr min(65ch, calc(100% - 64px)) 1fr;
column-gap: 32px;
}
.grid--wrapper > *,
.header {
grid-column: 2;
}
.full-bleed {
width: 100%;
grid-column: 1 / -1;
}

它采用了类似Medium的设计，图像向浏览器边缘渗出。

它有一个用于图像的full-bleed类：

.full-bleed {
width: 100%;
grid-column: 1 / -1;
}

我真的不知道如何让我的next/image与这种东西一起工作？

我的Img.tsx文件看起来像：

import Image from 'next/image'
type ImageProps = any
export const Img = ({ className = '', ...props }: ImageProps) => (
<Image className={`${className} full-bleed`} width="100%" {...props} />
)

我的components/mdx/index.ts看起来像：

import { H1 } from '@/components/mdx/H1'
import { H2 } from '@/components/mdx/H2'
import { H3 } from '@/components/mdx/H3'
import { H4 } from '@/components/mdx/H4'
import { H5 } from '@/components/mdx/H5'
import { H6 } from '@/components/mdx/H6'
import { Img } from '@/components/mdx/Img'
import { Pre } from '@/components/mdx/Pre'
import { PreCode } from '@/components/mdx/PreCode'
import { P } from './P'
export const MDXComponents = {
h1: H1,
h2: H2,
h3: H3,
h4: H4,
h5: H5,
h6: H6,
p: P,
img: Img,
pre: Pre,
'pre.code': PreCode,
}

我的.mdx文件包含普通的HTMLimg标记，它将使用如上所述的Img组件(内部使用next/image(。

当我没有身高时，如何获得全出血布局？我甚至无法让layout="fill"正常工作。它只是将图像重叠在一起。

有什么想法吗？

Answer 1

由于https://dev.to/tanahmed/next-image-make-image-fill-available-space-272o

我所要做的就是将我的标记更改为：

import Image, { ImageProps } from 'next/image'
export const Img = ({ className = '', ...props }: ImageProps) => (
<div className="unset-img full-bleed">
<Image className={`${className} custom-img`} layout="fill" {...props} />
</div>
)

并将我的CSS更改为：

.grid--wrapper {
display: grid;
grid-template-columns: 1fr min(65ch, calc(100% - 64px)) 1fr;
column-gap: 32px;
}
.grid--wrapper > *,
.header {
grid-column: 2;
}
.full-bleed {
width: 100%;
grid-column: 1 / -1;
}
.half-bleed {
width: 75%;
margin-left: auto;
margin-right: auto;
grid-column: 1 / -1;
}
.wrapper {
width: min(60ch, calc(100% - 64px));
}
.custom-img {
object-fit: contain;
width: 100% !important;
position: relative !important;
height: unset !important;
}
.unset-img {
width: 100%;
}
.unset-img > div {
position: unset !important;
}