如何解决CMS来源图片在网格布局中的CLS（累积布局偏移）问题？

核心思路：提前占位+自适应比例 #

由于无法提前获取图片固有宽高，要避免CLS（累积布局偏移），核心是给图片容器提前预留准确的空间，同时保证图片加载后能自适应填充且不破坏布局。

方案1：CSS aspect-ratio 预估占位（推荐） #

现代浏览器普遍支持aspect-ratio属性，可根据CMS图片的主流比例（如16:9、4:3、1:1）给容器设置预估比例，提前锁定空间：

1. 添加容器样式：

.img-container {
  position: relative;
  overflow: hidden;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 按比例填充容器，裁剪超出部分；也可用contain完整显示图片 */
}

2. 修改React组件，包裹容器并传入比例：

/* eslint-disable @next/next/no-img-element */
import { useState } from 'react';
import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayout';

interface IIntrinsicOptimizedImage {
    img: string;
    size: number;
    alt: string;
    className?: string;
    noLazy?: boolean;
    aspectRatio?: string; // 新增比例参数，默认给常用值
}

export const IntrinsicOptimizedImage: React.FC<IIntrinsicOptimizedImage> = ({
    img,
    size,
    alt,
    className,
    noLazy,
    aspectRatio = "16/9",
}) => {
    const [url, setUrl] = useState('');
    const _className = className ?? 'img';

    useIsomorphicLayoutEffect(() => {
        const dpr = 2;
        const w = (window.innerWidth * size) / 100;
        setUrl(`${img}&w=${w * dpr}`);

        return () => setUrl('');
    }, [img, size]); // 新增size依赖，窗口变化时重新计算图片尺寸

    return (
        <div className="img-container" style={{ width: `${size}vw`, aspectRatio }}>
            <img
                className={_className}
                src={url}
                alt={alt}
                decoding="async"
                loading={noLazy ? 'eager' : 'lazy'}
            />
        </div>
    );
};

方案2：SVG占位法（兼容旧浏览器） #

若需兼容不支持aspect-ratio的旧浏览器，可利用SVG的固有比例特性做占位：

1. 容器样式：

.img-container {
  width: fit-content;
  position: relative;
}

.img-container img,
.img-container .placeholder-svg {
  width: 100%;
  height: auto;
}

.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

2. 组件中添加SVG占位：

// 组件return部分修改
return (
    <div className="img-container" style={{ width: `${size}vw` }}>
        {/* viewBox对应比例，比如16:9就设0 0 16 9 */}
        <svg className="placeholder-svg" viewBox="0 0 16 9" aria-hidden="true">
            <rect width="16" height="9" fill="transparent" />
        </svg>
        <img
            className={_className}
            src={url}
            alt={alt}
            decoding="async"
            loading={noLazy ? 'eager' : 'lazy'}
        />
    </div>
);

方案3：加载后动态调整容器高度（减少CLS） #

如果完全无法预估图片比例，可在图片加载完成后获取实际宽高比，动态设置容器高度。此方案无法完全避免初始CLS，但能大幅减少后续布局偏移：

export const IntrinsicOptimizedImage: React.FC<IIntrinsicOptimizedImage> = ({
    img,
    size,
    alt,
    className,
    noLazy,
}) => {
    const [url, setUrl] = useState('');
    const [containerStyle, setContainerStyle] = useState<React.CSSProperties>({ width: `${size}vw` });
    const _className = className ?? 'img';

    useIsomorphicLayoutEffect(() => {
        const dpr = 2;
        const w = (window.innerWidth * size) / 100;
        setUrl(`${img}&w=${w * dpr}`);
        return () => setUrl('');
    }, [img, size]);

    const handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
        const imgEl = e.currentTarget;
        const ratio = imgEl.naturalHeight / imgEl.naturalWidth;
        setContainerStyle({
            width: `${size}vw`,
            height: `${size * ratio}vw`
        });
    };

    return (
        <div className="img-container" style={containerStyle}>
            <img
                className={_className}
                src={url}
                alt={alt}
                decoding="async"
                loading={noLazy ? 'eager' : 'lazy'}
                onLoad={handleImageLoad}
            />
        </div>
    );
};

关键注意事项 #

• 优先选择aspect-ratio方案，实现简单且能完全避免CLS，只要预估比例接近实际图片比例，视觉上不会有明显违和感。
• 如果CMS能返回图片的宽高比（哪怕是近似值），一定要用上，这能让占位空间更精准。
• 配合loading="lazy"时，确保容器的占位空间在页面初始渲染时就计算完成，避免懒加载图片进入视口时突然占用空间。

内容的提问来源于stack exchange，提问作者mis1