自定义图像在移动视图上没有响应

Question

我正在使用 TailwindCSS 进行样式设置，我有一张卡片在桌面上看起来不错，但在移动设备上却不好看，图像崩溃并且没有响应。我以某种方式搞砸了 tailwindcss 类。我附上了代码，请指导我我落后的地方。您的支持

Code:

<!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"
                    alt=""
                />
            </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>

Answer 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

自定义图像在移动视图上没有响应

Custom images are not responsive on mobile view

html

css

responsive-design

tailwind-css