如何裁剪网页图片？首次建站遇图片拉伸裁剪难题求助

下面给你两个简单实用的纯CSS方案，完美实现「横向铺满页面+仅裁剪底部少量区域」的需求，还能避免图片拉伸：

方法1：容器包裹+object-fit（推荐） #

给图片套一个容器，通过容器限制高度，配合object-fit属性保持图片比例并裁剪多余部分：

<div class="image-wrapper">
  <img src="你的图片地址" alt="项目展示图">
</div>

.image-wrapper {
  width: 100%;
  /* 调整这个高度控制裁剪幅度，比如80vh表示占视口高度80%，数值越小裁剪越多 */
  height: 80vh;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  /* 保持图片比例，超出容器的部分自动裁剪 */
  object-fit: cover;
  /* 让图片顶部对齐容器，这样只会裁剪底部多余区域 */
  object-position: top center;
}

方法2：背景图实现 #

如果不需要<img>标签的语义化，也可以把图片设为容器背景：

<div class="bg-image-box"></div>

.bg-image-box {
  width: 100%;
  height: 80vh;
  background-image: url('你的图片地址');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

关于height属性的补充 #

你之前直接给<img>设height没用，是因为单独设置height会强制拉伸图片变形。必须先通过容器固定展示高度，再配合object-fit（或背景图属性），才能既让图片铺满横向，又按比例裁剪底部。

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