css - CSS Grid Full Bleed Layout で動作する `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、Image のクラスがあります。

.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ファイルには、上記のように component を使用する通常の HTMLimgタグが含まれていImgます (これは内部的に を使用しますnext/image)。

高さがない場合、フルブリード レイアウトを取得するにはどうすればよいですか? layout="fill"仕事もまともにできない。画像を重ねるだけです。

何か案は？