自定义图像在移动视图上没有响应
Posted
技术标签:
【中文标题】自定义图像在移动视图上没有响应【英文标题】：Custom images are not responsive on mobile view 【发布时间】：2021-10-14 03:01:02 【问题描述】：我正在使用 TailwindCSS 进行样式设置，我有一张卡片在桌面上看起来不错，但在移动视图上却不行，图像确实崩溃并且没有响应。不知何故，我搞砸了 tailwindcss 类。我附上了代码，请指导我落后的地方。您的支持
代码：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css"/>
</head>
<body>
<div class="border-2 border-gray-400 bg-white shadow-sm m-0 rounded-2xl my-2 transform hover:scale-105 duration-200 ease-in-out cursor-pointer border-2 border-gray-400 bg-white"
>
<!-- Vaccinated Sticker End -->
<div class="col-span-2">
<div class="space-x-4 flex items-center">
<!-- Member Image -->
<div class="flex-shrink-0 h-48 w-40 sm:h-40 sm:w-52">
<img
class="ad-image object-cover max-h-full max-w-full h-full w-full rounded-l-xl"
src="https://images.unsplash.com/photo-1628547274104-fca69938d030?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80"
/>
</div>
<!-- Member Image end-->
<!-- Right Side area-->
<div class="flex-initial items-center">
<div class="my-4 space-y-2">
<div class="ad-information text-gray-800 font-bold text-base md:text-lg cursor-pointer pr-1">
<!-- Emoji Title-->
<div class="flex flex-wrap overflow-hidden">
<img src="https://images.unsplash.com/photo-1628547274104-fca69938d030?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" class="cursor-pointer w-auto md:h-8 h-4 lg:h-8" />
as dfakldjf akljf klajdf klajdf kladjf klsfk
<img src="https://images.unsplash.com/photo-1628547274104-fca69938d030?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" class="cursor-pointer w-auto md:h-8 h-4 lg:h-8" />
<img src="https://images.unsplash.com/photo-1628547274104-fca69938d030?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" class="cursor-pointer w-auto md:h-8 h-4 lg:h-8" />
<img src="https://images.unsplash.com/photo-1628547274104-fca69938d030?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" class="cursor-pointer w-auto md:h-8 h-4 lg:h-8" />
<img src="https://images.unsplash.com/photo-1628547274104-fca69938d030?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" class="cursor-pointer w-auto md:h-8 h-4 lg:h-8" />
<img src="https://images.unsplash.com/photo-1628547274104-fca69938d030?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" class="cursor-pointer w-auto md:h-8 h-4 lg:h-8" />
</div>
<!-- Emoji Title end-->
<!--Simple Title-->
<!--Simple Title End-->
<span class="ad-price normal-case mt-2 font-semibold mr-3 text-gray-800">$/30 minutes</span>
<span class="mr-1 border-r border-gray-300 max-h-0"></span>
<!-- Just a separator -->
<span class="ad-details text-gray-500 font-medium max-h-0">John Doe</span>
<br />
<span class="ad-details text-gray-500 font-medium max-h-0">30 Years, Asian</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：您想首先在页面头部添加一个视口元标记，例如
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css"/>
</head>
也许我们需要做一些额外的编辑，但从这个开始，看看它是如何进行的。
有关视口元标记的更多信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
【讨论】：
以上是关于自定义图像在移动视图上没有响应的主要内容，如果未能解决你的问题，请参考以下文章
iframe 中的 FancyBox 图像在移动设备上没有响应