我看到在过去的几个版本中,next.js图像大小有很多变化。当前版本为“下一个”:“13.4.4”。我正试图使响应图像大小,使一个给定的图像占用20%的屏幕宽度和高度相应调整。在next.js版本13中,许多功能都被弃用,比如“layout”。
以下是我的当前代码:
<div className="w-1/5 h-1/5 relative pt-[100%]">
<Image
src={user.user.photoURL}
alt="profile image"
fill
style={{ objectFit: "cover" }}
/>
</div>
这给我留下了一个宽度合适的图像,但高度是整个屏幕(减去页眉和页脚)。我该怎么做才能让它的高度不像那样膨胀呢?
谢谢
2条答案
按热度按时间gv8xihay1#
你有没有试过去掉“style”属性,并给它一个“object-cover”类?我可以假设style属性与tailwind冲突
j2cgzkjk2#
使用对象适配时,需要设置图像的宽度和高度(或纵横比)。
如果您将图像高度设置为
h-full
(height: 100%
),则还需要确保父div的高度(h-1/5
)有效。这将取决于父容器,但在演示代码中没有显示。如果你想要20%的屏幕高度,你可以使用
h-[20vh]
,如果这有帮助的话。一些演示代码来显示不同的结果。只有第一个示例给出了您想要的
object-cover
效果:https://play.tailwindcss.com/XlquKIXny8