javascript - 在 next.js 中更改方向后调整手机上的图像大小

Question

在与 Next.js 中的 Image 组件进行斗争，并最终与它越来越友好之后，我还有一个我似乎无法弄清楚的最后一个问题。

当我在手机上访问我的页面时，将其竖直放置（纵向模式），图像会正确呈现 - 填充可用的最大宽度。到目前为止一切都很好。现在，当我将手机旋转 90 度，切换到横向模式时，我的所有 CSS 都会根据我的媒体查询发生变化，但图像的大小与最初加载的大小相同。因此，不填充现在可用的最大宽度。刷新时，它们会正确呈现。

此外，在 Chrome Dev Tool Phone Emulator 中，一切都按预期工作。当我改变方向时，它会立即相应地改变图像大小。

如果您需要我的代码的任何部分，请告诉我，期待您的回音！

标签： javascriptcssimageresponsive-designnext.js