如何缩小Tailwind CSS页面中移动端图片的尺寸

你的问题出在移动端图片的尺寸控制和flex布局适配不足：当前代码里的scale-75会让图片实际显示尺寸超出父容器，且窄屏下flex横向排列会挤压空间，导致图片溢出。

修改方案 #

1. 给图片父容器添加移动端固定尺寸（如w-32 h-32），替代仅靠图片自身的尺寸控制
2. 移除图片的scale-75，避免缩放导致的尺寸溢出
3. 给外层flex容器添加flex-col md:flex-row，让移动端垂直排列，大屏保持横向布局
4. 调整图片类名，确保不同屏幕下的尺寸适配

修改后的完整代码 #

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

<div class="max-w-md mx-auto bg-white hover:bg-gray-200 py-3 px-6 border-b border-gray-300 overflow-hidden md:max-w-2xl">
    <div class="flex flex-col md:flex-row">
        <div class="md:shrink-0 w-32 h-32 md:w-48 md:h-full">
            <img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="Man looking at item at a store">
        </div>
        <div class="p-4 mt-4 md:mt-0">
            <div class="uppercase tracking-wide text-sm text-indigo-500 font-light">Course</div>
            <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">How to Organize Your Time and Your Life</a>
            <p class="mt-2">By: Pete Mockaitis | How to Be Awesome at Your Job</p>
            <span class="text-sm text-slate-500">134,768 Viewers. Released Jun 19, 2022</span>
        </div>
    </div>
</div>

修改后效果 #

• 移动端图片被限制在w-32 h-32容器内，不会超出预期
• 移动端布局改为垂直排列，避免横向空间不足的挤压问题
• 大屏下保持原有横向布局，图片尺寸适配为md:w-48 md:h-full

内容的提问来源于stack exchange，提问作者David Andor