响应式调整图片大小next.js with tailwind

iqih9akk 于 2023-06-05 发布在其他

关注(0)|答案(2)|浏览(165)

我看到在过去的几个版本中，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>

这给我留下了一个宽度合适的图像，但高度是整个屏幕（减去页眉和页脚）。我该怎么做才能让它的高度不像那样膨胀呢？
谢谢

next.js

来源：https://stackoverflow.com/questions/76396702/responsive-sizing-images-next-js-with-tailwind

2条答案

按热度按时间

gv8xihay1#

你有没有试过去掉“style”属性，并给它一个“object-cover”类？我可以假设style属性与tailwind冲突

赞(0）回复(0）举报 2023-06-05

j2cgzkjk2#

使用对象适配时，需要设置图像的宽度和高度（或纵横比）。
如果您将图像高度设置为h-full（height: 100%），则还需要确保父div的高度（h-1/5）有效。这将取决于父容器，但在演示代码中没有显示。
如果你想要20%的屏幕高度，你可以使用h-[20vh]，如果这有帮助的话。
一些演示代码来显示不同的结果。只有第一个示例给出了您想要的object-cover效果：

<p class="mt-10">With image height</p>
<div class="w-1/5 aspect-square relative bg-slate-300">
    <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=640&amp;h=320&amp;q=80" />
  </div>
</div>

<p class="mt-10">Without image height</p>
<div class="w-1/5 aspect-square relative bg-slate-300">
    <img class="w-full object-cover" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=640&amp;h=320&amp;q=80" />
  </div>
</div>

<p class="mt-10">Without height on container</p>
<div class="w-1/5 relative bg-slate-300">
    <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=640&amp;h=320&amp;q=80" />
  </div>
</div>

https://play.tailwindcss.com/XlquKIXny8

赞(0）回复(0）举报 2023-06-05

我来回答

响应式调整图片大小next.js with tailwind

2条答案

相关问题

热门标签

最新问答