如何在Bento Grid的div网格元素内适配并裁剪图片（仅用HTML/CSS）

在完成Frontend Mentor的Bento Grid挑战时，需要让网格元素内的图片适配容器并裁剪，确保不超出div范围，仅使用HTML和CSS。当前代码的图片效果不符合预期，需要调整实现不同屏幕尺寸下的适配展示。

当前代码：
CSS：

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

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>

核心修改点 #

1. 移除无效的background-size: cover（该属性仅作用于元素背景图，对<img>标签无效），改用object-fit: cover控制图片的适配方式。
2. 通过Flex布局让图片自动填充容器剩余空间，同时保证不溢出。

修改后的CSS代码：

/* 给父容器添加布局控制 */
.bento3 {
  overflow: hidden; /* 确保溢出部分被裁剪 */
  display: flex;
  flex-direction: column; /* 让标题和图片垂直排列 */
}

.bento3 > img {
  width: 100%;
  flex: 1; /* 让图片填充容器剩余的垂直空间 */
  object-fit: cover; /* 保持图片比例，裁剪超出容器的部分 */
  margin-top: 14px;
}

代码解释 #

• object-fit: cover：这是解决图片适配裁剪的关键属性，它会让图片保持原有宽高比，同时完全填充容器，超出容器的部分会被自动裁剪，完美符合需求。
• Flex布局：父容器设置display: flex; flex-direction: column后，<h2>会占据自身所需高度，而图片的flex:1会让它自动填充容器剩余的垂直空间，在不同屏幕尺寸下都能适配容器高度。
• overflow: hidden：作为兜底保障，防止极端情况下图片出现溢出。

这样修改后，图片就能在不同屏幕尺寸下适配网格元素的div，并且保持正确的裁剪效果，不会超出容器范围。

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