我想在 div 内调整和裁剪/裁剪图像，该 div 也是一个网格元素。我尝试过使用“溢出”，但它不起作用

Question

所以，我正在尝试完成前端导师的便当网格挑战。在一部分中，它要求我剪辑/裁剪图像元素，并且它不应该重叠在 div 之外。我只能使用 HTML 和 CSS。许多人为此使用了 Tailwind，但我正在尝试从头开始创建它。

这就是我所做的

HTML：

<!-- This div is in a grid container   -->
    <div class="box bento3">
      <h2>Maintain a consistent posting schedule.</h2>
      <img src="./assets/images/illustration-consistent-schedule.webp">
    </div>  

CSS：

  .bento3 > img {
    background-size: cover;
    width: 100%;
    height: auto;
    margin-top: 14px;
  }

这才是实际的样子

请记住，这不是裁剪。图像应该出现在不同的屏幕尺寸上。例如，如果我减小屏幕尺寸，它看起来像这样：

适用于 768px 屏幕尺寸

适用于 610px 屏幕尺寸

让我知道我应该做什么来实现这一目标。

Answer 1

看起来您正在尝试确保图像在网格元素内正确适配和剪辑。出现此问题的原因可能是没有在父容器上设置溢出属性来处理剪切。

.bento3 { 显示：网格；

溢出：隐藏； }

.bento3 > img {

宽度：100%；

高度：100%；

物体适配：覆盖；

顶部边距：14px； }