reactjs 图像无响应

14ifxucb 于 2023-05-06 发布在 React

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

我正在用Tailwind在Next.js中重新制作一个朋友网站，我在背景图像方面遇到了一些问题。它看起来不错的浏览器， chrome 和野生动物园，全窗口和手机变种，但我不能设法使它看起来很好的iPhone.它只在手机上压缩自己。知道为什么吗我已经附上了它在浏览器上的外观，当它在浏览器上的电话模式和最后一个是在iPhone上的实际网站。我也附上了代码。也许我错过了什么大idk。我真的很感激你的帮助。如果你需要这方面的更多细节，请告诉我

.custom-img2 {
  background-image: url('https://images.squarespace-cdn.com/content/v1/57becd489de4bb4083a32846/1474057401289-YVPRNRZCTFWWCCZXT8DE/ccro-weee.png?format=2500w ') ;

}

<div>
      <div className='flex items-center justify-center h-screen mb-12 bg-fixed bg-center bg-cover custom-img2 sm:custom-img2 md:custom-img2 lg:custom-img2'>
       <div className=' top-0 left-0 right-0 bottom-0 bg-black/70 z-[2]' />
      <div className='p-5 text-white z-[2] mt-[-10rem] l '>
        <h2 className='text-5xl font-bold  '>About Us</h2>
        <p className='py-5 text-xl '></p>
      </div>
      </div>
      {/* Overlay */}
.............
..............
...............
.............
</div>

我试着玩了一整天的顺风屏幕和next/image，但都无济于事。

reactjs

来源：https://stackoverflow.com/questions/76160033/image-isnt-responsive

1条答案

按热度按时间

qq24tv8q1#

sm、md、lg指定您希望在不同的屏幕尺寸下如何更改样式，因为Tailwind首先为移动的设计，因此无需添加这些屏幕尺寸。
不知道是什么原因导致你的图像显示的方式，但我使用的bg属性在顺风和它出来的罚款在不同的设备。

<div>
      <div className="flex items-center justify-center h-screen mb-12 bg-fixed bg-center bg-cover bg-[url('https://images.squarespace-cdn.com/content/v1/57becd489de4bb4083a32846/1474057401289-YVPRNRZCTFWWCCZXT8DE/ccro-weee.png?format=2500w')]">
        <div className=" top-0 left-0 right-0 bottom-0 bg-black/70 z-[2]" />
        <div className="p-5 text-white z-[2] mt-[-10rem] l ">
          <h2 className="text-5xl font-bold  ">About Us</h2>
          <p className="py-5 text-xl "></p>
        </div>
      </div>
    </div>

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

我来回答

reactjs 图像无响应

1条答案

相关问题

热门标签

最新问答