使用 CSS Grid Full Bleed 布局获取“下一个/图像”？

Posted 2023-03-06

【中文标题】使用 CSS Grid Full Bleed 布局获取“下一个/图像”？

【英文标题】：Get `next/image` working with CSS Grid Full Bleed Layout?

【发布时间】：2021-02-20 14:41:14

【问题描述】：

我正在尝试关注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 类的图像：

.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`  ...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" 正常工作。它只是将图像重叠在一起。

有什么想法吗？

【问题讨论】：

所以我认为grid-column: 1 / 4; 也不起作用？这是否会引发与您的路径相关的任何错误？

也许这个codepen 会有所帮助

@ra.design 没有错误，它是 CSS。 CSS 不会抛出任何错误。或任何其他错误。

@SionaFernandes 我认为 codepen 与我想要实现的目标不同。我的来自next/image 的img 标记包含在2 个div 中，您提到的codepen 只有一个***img。如果我用常规的img 替换next/image，我的代码就可以正常工作:)

@deadcoder0904 你能告诉我们渲染的标记吗？

【参考方案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;