嘿，这个问题我之前也碰到过！你用margin-top:-10%的思路没问题，但踩了一个CSS的小坑——百分比的margin/padding是基于父元素的宽度计算的，不是高度！这就导致在移动端（屏幕宽度小）时，-10%对应的实际像素值比桌面端小很多，图片上移的距离不够，自然会和父元素底部留下间隙。

下面给你几个更靠谱的实现方案，从简单到兼容老浏览器的都有：

这是CSS专门为图片/视频裁剪适配设计的属性，兼容性已经覆盖了绝大多数现代浏览器（包括移动端），完全不需要负margin这类hack。

实现步骤：

• 父元素设置固定高度，加上overflow: hidden（确保超出部分被裁剪）
• 给图片设置以下样式：

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 让图片按比例填满容器，超出部分裁剪 */
  object-position: center top; /* 控制图片显示的位置：center水平居中，top表示顶部对齐，这样顶部会被裁掉 */
}

如果想要精确裁剪顶部10%的区域，可以调整object-position的Y值，比如object-position: center 10%——这里的10%是图片自身高度的百分比，意思是把图片向下偏移10%，这样顶部的10%就会被父元素裁剪掉。

如果这张图片是纯装饰性的（不需要被搜索引擎抓取），可以把它设为父元素的背景图，这样也能轻松实现顶部裁剪：

.parent {
  height: 你的固定高度;
  background-image: url('你的图片路径');
  background-size: cover;
  background-position: center top; /* 同样控制显示位置，裁剪顶部 */
  background-repeat: no-repeat;
}

这种方法完全不会有间隙问题，因为背景图会自动填满容器。

如果需要兼容一些不支持object-fit的老浏览器（比如IE），可以用绝对定位配合transform来实现，这个方法的好处是裁剪比例基于图片自身高度，不会受父元素宽度影响：

• 父元素设置position: relative; overflow: hidden; height: 你的固定高度;
• 图片设置：

img {
  position: absolute;
  top: 50%; /* 先让图片垂直居中 */
  left: 0;
  width: 100%;
  transform: translateY(-60%); /* 向上偏移自身高度的60%，相当于顶部裁掉10% */
}

这里的translateY(-60%)怎么来的？默认top:50%是图片中点和父元素中点对齐，往上多移10%的自身高度（总共60%），就会把图片顶部的10%裁掉，不管屏幕宽度怎么变，裁剪比例都是准确的，不会出现底部间隙。

总结 #

优先用方案1，简洁又可靠；如果是装饰图用方案2；需要兼容老浏览器就用方案3。原来的负margin方法因为依赖父元素宽度，在响应式场景下很容易出问题，建议换掉~

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