对象适配类在桌面上运行良好，但在移动的屏幕上，它在顺风css中没有采用全宽

enxuqcxy 于 2023-01-18 发布在其他

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

悬停时，我会显示一个图像和内容。在桌面上，图像会占用父图像的整个宽度。但在移动的屏幕上，它不起作用。有办法解决吗？

<div class="content mt-7">
                        <h2 class="title text-xl font-semibold">Fitness & Wellness</h2>
                        <p class="text-slate-400 mt-3">Custom software for fitness and wellness which is much needed professionally and personally.
                        </p>
                    </div>

                    <div class="hidden group-hover:block ">
                        <div class="absolute inset-0 ">
                            <img src="./assets/images/services/Fitness 1.jpg" alt="" class="object-cover " >
                            <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black"></div>
                        </div>

                        <div class="absolute bottom-0 right-0 left-0 mb-6">
                            <a href="" class="text-white text-xl font-bold">Fitness & Wellness</a>
                        </div>
                    </div>
                </div>

css

来源：https://stackoverflow.com/questions/75084217/object-fit-class-is-working-fine-on-desktop-but-on-mobile-screen-it-is-not-takin

1条答案

按热度按时间

nbnkbykc1#

这里有一个代码你可以试试。

<div class="group">
<div class="content mt-7">
<h2 class="title text-xl font-semibold">Fitness & Wellness</h2>
 <p class="text-slate-400 mt-3">Custom software for fitness and wellness which 
  is much needed professionally and personally.
 </p>
 </div>
 <div class="invisible group-hover::visible">
  <div class="absolute inset-0 ">
  <img src="https://images.unsplash.com/photo-1671726805766-de50e4327182?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" alt="" class="object-cover w-full h-full" >
  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black"> 
 </div>
 </div>

  <div class="absolute bottom-0 right-0 left-0 mb-6">
  <a href="" class="text-white text-xl font-bold">Fitness & Wellness</a>
 </div>
</div>
</div>

赞(0）回复(0）举报 2023-01-18

我来回答

对象适配类在桌面上运行良好，但在移动的屏幕上，它在顺风css中没有采用全宽

1条答案

相关问题

热门标签

最新问答