搞定这个需求很简单！你要的是图片填满容器高度、超出右侧自动裁剪、不显示红色背景还保留原图比例，直接用下面的CSS就能实现：

核心样式设置 #

首先给容器figure#main-img配置基础属性：

figure#main-img {
  height: 400px; /* 替换成你需要的具体高度，自适应父元素可改为100% */
  overflow: hidden; /* 关键：隐藏容器外的所有内容 */
  margin: 0; /* 清除figure默认外边距，避免多余留白 */
  background-color: red; /* 这个背景会被图片完全覆盖，不会显示 */
}

然后给图片设置比例适配规则：

figure#main-img img {
  height: 100%; /* 强制图片高度填满容器 */
  width: auto; /* 自动计算宽度，保留图片原有宽高比 */
}

为什么这能满足你的需求？ #

• overflow: hidden 会把所有超出容器边界的内容（包括图片右侧和容器的红色背景）都隐藏，正好实现右侧裁剪的效果
• 图片的height: 100%确保它完全贴合容器高度，width: auto让图片按原有比例自动拉伸宽度——如果图片宽度超过容器，超出的右侧部分就会被容器的裁剪规则处理掉
• 因为图片高度完全填满了容器，容器的红色背景根本没有显示的空间

完整代码示例 #

<figure id="main-img"><img src="http://www.kimwilddesigns.com/web-lesson/4-4_start/images/hp_main-img_1.jpg"/></figure>

figure#main-img {
  height: 400px;
  overflow: hidden;
  margin: 0;
  background-color: red;
}

figure#main-img img {
  height: 100%;
  width: auto;
}

如果你的容器高度需要自适应父元素，只需要把height: 400px改成height: 100%就行，核心逻辑完全不变。

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