如何在Next.js 13 <Image>中使用objectFit？
回答 3
浏览 6414
2022-10-26
在版本历史下的next/image docs中，它对v13.0.0有如下说明：
layout, objectFit, objectPosition, lazyBoundary, lazyRoot props removed.
在fill的next/image 文档下，文档指出我们可以对象设置为object-fit: "contain"或object-fit: "cover"。我无法设置适合覆盖以下代码的对象：
<div className="relative">
<Image
src=""
alt=""
fill={true}
layout="fill"
object-fit="cover"
/>
</div>
如何用Next.js 13实现object-fit呢？
你可以直接通过CSS来设置它。例如，你可以这样做。
style={{ objectFit: 'cover' }}.见nextjs.org/docs/api-reference/next/image#style。
- juliomalves 2022-10-29
3 个回答
#1楼
已采纳
得票数 23
NextJS Image 组件现在支持 style 属性，所以我相信这是正确的答案：
<div style={{position:"relative"}}>
<Image
src={source}
alt=""
fill
style={{objectFit:"cover"}}
/>
</div>
父容器相对定位。
这救了我的命 - 谢谢。感觉这个文档的解释不是很好。
- barrylachapelle 2023-02-26
另外，我喜欢以前的方式，即仅仅将高度和宽度定义为长宽比，如height="3" width="4"。这种严格定义高度和宽度的新方法似乎很愚蠢。
- Čedomir Babić 2023-02-26
这真的很蹩脚。我做了同样的事情--用高度/宽度来注入图像比例，然后用layout="responsive"来确定父图像的大小。我的所有图片都在markdown文件中，而codemod不能在markdown上运行。唉--我有几百张图片要修复。我来了：(Python)
- barrylachapelle 2023-02-27
#2楼
得票数 3
在next.js中，objectFit=和layout=都从图像组件中被废弃，必须用style或className来实现。Fill是一个布尔值，如果不应用则为假，如果存在则为真。
<div className="relative">
<Image
src="/"
alt="logo"
fill
style={{objectFit:"contain"}}
/>
</div>
参考：
#3楼
得票数 0
在objectFit中使用填充物与骆驼的情况对我来说是有效的。
<div className="relative">
<Image
src=""
alt=""
fill
objectFit="contain"
/>
</div>
我发现这个备忘单很有帮助。祝您好运!