如何用CSS仅裁剪图片高度（保持宽度）并实现居中与响应式？

你当前的代码会缩小图片宽度，是因为width:100%配合max-height:600px让图片按比例缩放，而非直接裁剪。要实现仅裁剪高度、保持宽度（适配设备时宽度自适应）且从中心裁剪的效果，可按以下方案调整：

核心思路 #

1. 给容器设置固定高度600px，同时添加max-width:100%确保小屏幕下不会超出视口宽度，用overflow:hidden隐藏超出容器高度的图片部分。
2. 让图片填充容器，通过object-fit:cover保持原始比例，超出部分自动裁剪；用object-position:center指定从图片中心位置开始裁剪。

修正后的代码 #

HTML #

<div class="container"><img src="/wp-content/uploads/2023/02/Kong.jpg"></div>

CSS #

.container {
  height: 600px;
  max-width: 100%;
  overflow: hidden;
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

效果说明 #

• 针对原始1200px×800px的图片，容器高度固定为600px，图片会自动裁剪上下各100px的区域，保留中心600px高度的内容，宽度保持与容器一致（大屏下为1200px）。
• 在小屏幕设备上，容器宽度会自适应视口，图片宽度同步调整，高度始终维持600px，且始终裁剪图片中心区域，完美适配全设备。

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