如何隐藏水平溢出绝对元素答案

【问题标题】：How to hide horizontal overflow absolute element如何隐藏水平溢出绝对元素
【发布时间】：2021-12-29 11:16:12
【问题描述】：

我正在使用顺风。我想创建一个具有固定大小图像的布局。我的容器是 1200px 和居中的视口。

视口较小时图像会溢出，但我想隐藏图像的溢出部分。这意味着用户无法滚动查看它。谢谢

这是我的代码：https://play.tailwindcss.com/YVOEhykx1E

【问题讨论】：

【解决方案1】：

这里，是小更新！我认为您可以通过探索文档做得更好

<div class="h-screen mx-auto bg-red-500 grid grid-cols-12 gap-8 overflow-hidden">
  <div class="col-span-12 col-start-8">
    <img class="object-cover h-full w-full" src="https://images.unsplash.com/photo-1640686708297-e6dc01470fb8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt="" />
  </div>
</div>

【讨论】：

我认为你误解了我的目的。我需要禁用图像进行的水平滚动，而不是使图像适合容器:(
你现在可以检查一下吗？
您错过了重要信息，例如图像是固定大小的。它必须有宽度 1044 像素和高度是 380 像素，容器是 1200 像素和 mx-auto