使用 next/Image 在移动设备上缩小图像

Question

我正在使用

next/Image

和 tailwind 来渲染充当横幅的图像。它跨越其父级的整个宽度，即整个页面宽度。

我遇到的问题是图像在移动设备上看起来被压扁且比例不正确，我正在寻求修复。我已经尝试过该网站上其他两个解决方案的解决方案（here和here），但没有任何对我有用。

我怀疑这可能是在父 div 上设置的高度，如果这有助于解决我的问题，我愿意更改它。

      <div className="relative w-full h-[476px]">
  <Image src="/banner.jpg" alt="Banner" fill />
</div>

Answer 1

您可以通过使用适用于 img 元素的

object-fit

在 CSS 中实现此目的。您可以尝试

object-fit: cover;

或

object-fit: contain;

，无论哪个最适合您的用例。