Блог

Главная - Вопросы по программированию - Получить `next / image`, работающий с макетом CSS Grid Full Bleed?

Получить `next / image`, работающий с макетом CSS Grid Full Bleed?

#css #next.js #css-grid #mdxjs #nextjs-image

#css #next.js #css-grid #mdxjs #nextjs-image

Вопрос:

Я пытаюсь следовать этому руководству.

Вот 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;
}

Он соответствует среднему дизайну с изображениями, растекающимися по краям браузера.

И у него есть 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 файлы содержат обычные HTML img -теги, которые будут использовать Img компонент, как написано выше (который используется внутри next/image ).

Как мне получить полноразмерный макет, если у меня нет высоты? Я даже не layout="fill" могу нормально работать. Он просто накладывает изображения друг на друга.

Есть идеи?

Комментарии:

1. Так что, я полагаю grid-column: 1 / 4; , это тоже не работает? Выдает ли это какие-либо ошибки по отношению к вашему пути?

2. Может быть, этот codepen поможет

3. @ra.design ошибок нет, это CSS. CSS не выдает никаких ошибок. Или любые другие ошибки.

4. @SionaFernandes я думаю, что codepen отличается от того, чего я пытаюсь достичь. мой img тег, который берется из next/image , завернут в 2 div ‘s, а упомянутый вами codepen имеет только верхний уровень img . если я заменю next/image на обычный img , мой код будет работать просто отлично 🙂

5. @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;
}