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

Question

我想做一些我认为会非常简单的事情:在 200px 显示图像x 200px , 除非屏幕尺寸是 < 500px , 在这种情况下显示在 100px x 100px相反。

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

我最终通过以下方式让事情正常进行:

1. 以 Image 开头使用layout="fill"和 objectFit="cover"

2. 用 <div> 包装它有 max-width和 max-height (还有最小宽度/高度)200px

3. 添加媒体查询以将 #2 中的样式更改为 100px以下 500px屏幕宽度

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

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

Answer 1

您需要添加包装 className={logoContainer}对于 <Image> ，即

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;
  }
}