Tailwind CSS 将图像设置为桌面宽度的 2/3答案

【问题标题】：Tailwind CSS set image to take 2/3 of width on desktopTailwind CSS 将图像设置为桌面宽度的 2/3
【发布时间】：2022-09-26 09:42:37
【问题描述】：

我对 Tailwind CSS 很陌生，我试图在横幅内设置两个图像，当在桌面屏幕上查看此图像时，第一个图像占用 1/3 的宽度，第二个图像占用 2/3 的宽度。在移动设备中，我需要以全宽显示图像，以便用户可以左右滚动到每个图像。现在我的代码在桌面上运行良好，但在移动设备上它以相同的排列显示图像，即屏幕宽度的 1/3 和 2/3，这不是我想要的。我曾尝试分别针对 md:w-1/3 和 2/3 ，但它似乎把一切都搞砸了。我还尝试在内部 div 元素中使用 md:grid md:grid-cols-3 ，然后将第二张图片设置为 md:col-span-2 但它不起作用。

对于我的代码有什么问题，我将不胜感激。非常感谢您。

<div class=\"images-wrapper\">
  <div class=\"flex bg-white md:bg-transparent h-full overflow-x-auto md:overflow-x-hidden without-scrollbar gap-1 md:gap-1.5 flex-nowrap h-full w-full flex-grow md:flex-grow-0 flex-shrink-0 md:flex-shrink\">
    <a class=\"w-1/3\" href=\"javascript:;\">
      <img class=\"object-cover aspect-video object-center min-h-[250px] md:min-h-[227px] max-h-[250px] md:min-h-[227px] md:max-h-[227px] w-full h-full md:rounded-tl-[40px]\" src=\"http://...\">
    </a>
    <a class=\"w-2/3\" href=\"javascript:;\">
      <img class=\"object-cover aspect-video object-center min-h-[250px] md:min-h-[227px] max-h-[250px] md:min-h-[227px] md:max-h-[227px] w-full h-full md:rounded-tr-[40px]\" src=\"http://...\">
    </a>
  </div>
</div>

标签： css flexbox tailwind-css

【解决方案1】：

所以我第二天早上发现了这个问题，我将 w-1/3 定位为 md 大小的屏幕并设置了 min-width 。最终代码如下所示：

<div class="images-wrapper">
  <div class="flex bg-white md:bg-transparent h-full overflow-x-auto md:overflow-x-hidden without-scrollbar gap-1 md:gap-1.5 flex-nowrap h-full w-full flex-grow md:flex-grow-0 flex-shrink-0 md:flex-shrink">
    <a class="w-full md:w-1/3 min-w-full md:min-w-0" href="javascript:;">
      <img class="object-cover aspect-video object-center min-h-[250px] md:min-h-[227px] max-h-[250px] md:min-h-[227px] md:max-h-[227px] w-full h-full md:rounded-tl-[40px]" src="http://...">
    </a>
    <a class="w-full md:w-2/3 min-w-full md:min-w-0" href="javascript:;">
      <img class="object-cover aspect-video object-center min-h-[250px] md:min-h-[227px] max-h-[250px] md:min-h-[227px] md:max-h-[227px] w-full h-full md:rounded-tr-[40px]" src="http://...">
    </a>
  </div>
</div>

导致问题的另一件事是我的浏览器没有立即响应 CSS 更新，但仅在 localhost 重新启动后才响应，因此请确保您对 CSS 的更新正确呈现。感谢Zemame Youcef Oualid 的建议。

【讨论】：

【解决方案2】：

当你首先使用tailwind css时，你需要以手机分辨率开始构建并向上移动，所以你可以在class="w-full md:w-1/3 lg..."class="w-full md:w-2/3 lg..."时使用

【讨论】：