In the 下一个/图像文档 https://nextjs.org/docs/api-reference/next/image在版本历史记录下,v13.0.0 的内容如下:
删除了布局、objectFit、objectPosition、lazyBoundary、lazyRoot 属性。
在下一个/图像文档下fill https://nextjs.org/docs/api-reference/next/image#fill文档指出我们可以设置对象适合object-fit: "contain"
或者替代地object-fit: "cover"
。我无法使用以下代码设置对象适合覆盖:
<div className="relative">
<Image
src=""
alt=""
fill={true}
layout="fill"
object-fit="cover"
/>
</div>
一、如何实现对象匹配 https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit与 Next.js 13 一起使用吗?
NextJS Image 组件现在支持 style 属性,所以我相信这是正确的答案:
<div style={{position:"relative"}}>
<Image
src={source}
alt=""
fill
style={{objectFit:"cover"}}
/>
</div>
父容器是相对定位的。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)