让 `next/image` 与 CSS 网格全出血布局一起工作?
Get `next/image` working with CSS Grid Full Bleed Layout?
我正在尝试关注 this tutorial。
这是 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
class 图像:
.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
文件包含正常的 HTML img
标签,这些标签将使用上面写的 Img
组件(内部使用 next/image
)。
没有高度时如何获得全出血布局?我什至无法让 layout="fill"
正常工作。它只是将图像彼此重叠。
有什么想法吗?
感谢 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;
}
我正在尝试关注 this tutorial。
这是 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
class 图像:
.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
文件包含正常的 HTML img
标签,这些标签将使用上面写的 Img
组件(内部使用 next/image
)。
没有高度时如何获得全出血布局?我什至无法让 layout="fill"
正常工作。它只是将图像彼此重叠。
有什么想法吗?
感谢 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;
}