防止图像宽度在nextjs顺风上收缩

a2mppw5e 于 2023-08-04 发布在其他

关注(0)|答案(1)|浏览(101)

我在一个网站上工作，它在我的屏幕上看起来很好。

的数据
然而，图像div在更小的屏幕或移动的上正在缩小，而文本是好的。

的
我如何修复它，使用户能够看到图像，无论屏幕大小？

<div className="flex justify-center items-center p-5" id="intro">
  <div className="relative w-[500px] h-[500px]">
    <Image src="/blank.png" alt="blank face" fill={true} />
  </div>
  <div className="flex-col justify-center align-middle items-center p-5">
  </div>
</div>

字符串

next.js

来源：https://stackoverflow.com/questions/76724057/prevent-image-width-shrinking-on-nextjs-tailwind

1条答案

按热度按时间

klh5stk11#

您可以考虑将flex-shrink: 0应用于<div>，通过shrink-0实用程序类 Package <Image>组件，以便它不会收缩：

<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<div class="flex justify-center items-center p-5" id="intro">
  <div class="relative w-[500px] h-[500px] shrink-0">
    <img src="https://picsum.photos/500/500" alt="blank face" style="position: absolute; height: 100%; width: 100%; inset: 0px; object-fit: cover; color: transparent;" />
  </div>
  <div class="flex-col justify-center align-middle items-center p-5">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae justo placerat, consequat nulla quis, mollis elit. Aenean ultrices risus in tellus mollis luctus. Nullam tortor nisi, tincidunt eget lorem sit amet, porttitor ullamcorper nisi. Curabitur a erat vitae elit dignissim pellentesque et sit amet purus. Curabitur nec augue blandit, tincidunt odio iaculis, pretium erat. Donec id sapien ut purus auctor dapibus. Quisque luctus non sapien id ultricies. Quisque cursus velit sollicitudin neque ullamcorper, quis accumsan felis scelerisque. Ut volutpat quis purus nec bibendum.
  </div>
</div>

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

防止图像宽度在nextjs顺风上收缩

1条答案

相关问题

热门标签

最新问答