如何使用next-image实现图片按max-width和max-height自动等比缩放

解决方案 #

方案1：已知图片原始宽高（推荐，可避免CLS布局偏移） #

Next.js 13+ 新版Image组件

直接传入图片原始宽高，配合自定义样式覆盖默认属性即可：

import Image from 'next/image'

<Image
  src="你的图片路径"
  alt="图片描述"
  width={图片原始宽度}
  height={图片原始高度}
  className="post-image"
/>

对应CSS：

.post-image {
  display: block;
  max-width: 100% !important;
  max-height: 350px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto;
}

Next.js 12及更早旧版Image组件

使用layout="intrinsic"属性，配合上述同样的CSS即可：

import Image from 'next/legacy/image'

<Image
  src="你的图片路径"
  alt="图片描述"
  width={图片原始宽度}
  height={图片原始高度}
  layout="intrinsic"
  className="post-image"
/>

方案2：未知图片原始宽高 #

如果无法提前拿到图片的原始宽高，可在外层套自适应容器，配合fill模式实现：

import Image from 'next/image'

<div className="image-wrapper">
  <Image
    src="你的图片路径"
    alt="图片描述"
    fill
    className="object-contain"
  />
</div>

对应CSS：

.image-wrapper {
  position: relative;
  width: 100%;
  max-height: 350px;
  /* 外层高度自适应，不固定高度避免宽短图片出现空白 */
  height: fit-content;
}

这个方案里宽短图片会自动占满容器全宽，外层高度和图片高度一致，不会出现多余空白；高窄图片高度会被限制在350px内，自动水平居中。

原有方案失效原因 #

• 使用layout="responsive"时，该模式强制图片占满父容器100%宽度，会忽略max-height限制，导致高窄图片被拉伸过高
• 使用fill模式时之前固定了外层容器高度为350px，改为自适应高度+最大高度限制即可解决空白问题

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