如何在 Next.js 中在移动设备上显示不同大小的图像答案

【问题标题】：How to Show Different Sized Image on Mobile in Next.js如何在 Next.js 中在移动设备上显示不同大小的图像
【发布时间】：2022-08-15 16:41:07
【问题描述】：

我想做一些我想做的事想法将非常简单：在200px x 200px 处显示图像，除非屏幕尺寸为< 500px，在这种情况下将其显示在100px x 100px 处。

这似乎是最基本的响应式设计：只有一张图像，根据屏幕尺寸有两个不同的尺寸......但它似乎仅使用 Next\ 的 <Image> 标签是不可能的。该标签有大量相关的道具（sizes、loader、srcSet ......加上下一个配置中的deviceSizes 和imageSizes）......但它们似乎都没有让我实现这个基本目标。

我最终通过以下方式解决了问题：

以使用 layout=\"fill\" 的 Image 和 objectFit=\"cover\"
用具有max-width 和max-height 的<div> 包装它（以及最小宽度/高度）200px
添加媒体查询以将#2 中的样式更改为下面的100px 500px 屏幕宽度

...但这感觉就像我只是在扔掉<Image> 的所有功能并重写我自己的组件，而且我没有让 Next 以这种方式自动调整我的图像大小。

有没有更简单的方法可以直接使用<Image> 标签（而不仅仅是在它周围设置<div> 的样式）来获得相同的效果（同样，相同的图像，只是两个不同的尺寸，由屏幕尺寸控制）？

标签： next.js

【解决方案1】：

您需要为<Image> 添加一个包装className={logoContainer}，即

import style from 'styles/Logo.module.css';

<div className={`mx-auto ${style.logoContainer}`>
  <Image className={style.logo} src={logo} alt="logo" />
</div>

并使用css（我的引导类案例）：

.logoContainer {
  width: 60px;
  height: 42px;
}

@media (min-width: 768px) {
  .logoContainer {
    width: 65px;
    height: 46px;
  }
}

@media (min-width: 992px) {
  .logoContainer {
    width: 90px;
    height: 63px;
  }
}

【讨论】：