你可以把两种方法结合起来使用。

.crop { 宽度:200 px; 身高:150 px; 溢出:隐藏; ｝ .crop img { 宽度:400 px; 身高:300 px; Margin: -75px 00 -100px; ｝ < div class = "作物”> <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="唐老鸭"> < / div >

您可以使用负边距在<div/>内移动图像。

在之前的答案中增加了一个小的内容，包括对象合身:封面:

对象的位置

您可以使用object-position属性更改替换元素的内容对象在元素框中的对齐方式。

.trimmed-cover { object-fit:封面; 宽度:100%; 身高:177 px; 物体位置:中心40%; ｝ <img class="trim -cover" src="http://i.stack.imgur.com/wPh0S.jpg">

你可以使用Kodem的图片调整服务。您可以通过http调用调整任何图像的大小。可以在浏览器中随意使用，也可以在生产应用程序中使用。

上传图片到你喜欢的地方(S3, imgur等) 将其插入到您的专用API url(从我们的仪表板)

我最近需要这样做。我想做一个缩略图链接到NOAA的图表。由于他们的图形可以随时改变，我希望我的缩略图也能随之改变。但他们的图表有一个问题:它在顶部有一个巨大的白色边框，所以如果你只是缩放它来制作缩略图，你最终会在文档中出现多余的空白。

以下是我的解决方法:

http://sealevel.info/example_css_scale_and_crop.html

首先我需要做一点算术。来自NOAA的原始图像是960 × 720像素，但前70个像素是一个多余的白色边界区域。我需要一个348 × 172的缩略图，顶部没有额外的边界区域。这意味着原始图像的期望部分是720 - 70 = 650像素高。我需要将其缩小到172像素，即172 / 650 = 26.5%。这意味着需要从缩放图像的顶部删除70 = 19行的26.5%的像素。

So…

设置高度= 172 + 19 = 191像素: 身高= 191 设置底部边距为-19像素(将图像缩短为172像素高): margin-bottom: -19像素 设置顶部位置为-19像素(将图像向上移动，以便顶部19像素的行溢出并隐藏，而不是底部的行): 前:-19像素

生成的HTML如下所示:

<a href="…" style="display:inline-block;overflow:hidden">
<img width=348 height=191 alt=""
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…"></a>

如您所见，我选择样式包含<a>标记，但您可以样式包含<div>。

这种方法的一个缺点是，如果您显示边界，顶部的边界将会丢失。因为我使用border=0，所以这对我来说不是问题。

您可以将img标记放在div标记中，但我建议不要在浏览器中缩放图像。它在大多数时候都做得很糟糕，因为浏览器的缩放算法非常简单。最好先在Photoshop或ImageMagick中进行缩放，然后将其漂亮地提供给客户端。

谢谢sanchothefat。

我对你的回答有改进的地方。由于裁剪是非常适合每一个图像，这个定义应该在HTML而不是CSS。

<div style="overflow:hidden;">
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>