你试过用这个吗？

.centered-and-cropped { object-fit: cover }

我需要调整图像大小、居中（垂直和水平）然后裁剪它。

我很高兴地发现，它可以在一条 css 行中完成。在此处查看示例：http://codepen.io/chrisnager/pen/azWWgr/?editors=110

以下是该示例中的 CSS 和 HTML 代码：

.centered-and-cropped { object-fit:cover }

original

object-fit: cover

.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}

<div class="imgContainer">
  <img src="imageSrc" />
</div>

包含 div 基本上通过隐藏溢出来裁剪图像。

img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}

<img src="w3css.gif" width="100" height="140" />

谢谢sanchothefat。

我对你的回答有改进。由于裁剪是为每个图像量身定制的，因此此定义应位于 HTML 而不是 CSS。

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

如果您正在使用 标签，object-fit 可能会对您有所帮助

下面的代码将为您裁剪图像。你可以玩object-fit

img {
  object-fit: cover;
  width: 300px;
  height: 337px;
}

对包括 object-fit: cover 的先前答案的一个小补充：

object-position

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

.trimmed-cover { 对象适合：封面；宽度：100%；高度：177px；对象位置：中心 40%； }

https://i.stack.imgur.com/7uRBR.gif

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
} 

实时示例：https://jsfiddle.net/de4Lt57z/

HTML：

<div class="crop">
  <img src="example.jpg" alt="..." />
</div>

CSS：

    .crop img{
      width:400px;
      height:300px;
      position: absolute;
      clip: rect(0px,200px, 150px, 0px);
      }

说明：这里的图像根据图像的宽度和高度值调整大小。裁剪是由剪辑属性完成的。

有关剪辑属性的详细信息，请遵循：http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

尝试使用 clip-path 属性：

clip-path 属性允许您将元素剪辑为基本形状或 SVG 源。注意：clip-path 属性将替换已弃用的 clip 属性。

img { 宽度：150px;剪辑路径：插入（30px 35px）； }

更多示例 here。

在裁剪类中，放置要显示的图像大小：

.crop {
    width: 282px;
    height: 282px;
    overflow: hidden;
}
.crop span.img {
    background-position: center;
    background-size: cover;
    height: 282px;
    display: block;
}

html 将如下所示：

<div class="crop">
    <span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>

<p class="crop"><a href="http://templatica.com" title="Css Templates">
    <img src="img.jpg" alt="css template" /></a></p> 

.crop {
    float: left;
    margin: .5em 10px .5em 0;
    overflow: hidden; /* this is important */
    position: relative; /* this is important too */
    border: 1px solid #ccc;
    width: 150px;
    height: 90px;
}
.crop img {
    position: absolute;
    top: -20px;
    left: -55px;
}

有 services 之类的 Filestack 可以为您执行此操作。

他们获取您的图像 url 并允许您使用 url 参数调整它的大小。这很容易。

调整为 200x100 但保持纵横比后，您的图像将如下所示

整个网址看起来像这样

https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg

但重要的部分只是

resize=width:200/crop=d:[0,25,200,100]

https://i.stack.imgur.com/yefj6.jpg

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

我所做的是创建一个服务器端脚本，该脚本将在服务器端调整和裁剪图片的大小，以便通过互联网发送更少的数据。

这相当琐碎，但如果有人有兴趣，我可以挖掘并发布代码（asp.net）

<div class="crop">
    <img src="image.jpg"/>
</div>

.crop {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.crop img {
  width: 100%;
  /*Here you can use margins for accurate positioning of cropped image*/
}

如果您使用的是 Bootstrap，请尝试使用 { background-size: cover; } 作为 <div> 可能给 div 一个类说 <div class="example" style=url('../your_image.jpeg');> 所以它变成 div.example{ background-size: cover}

我最近需要这样做。我想制作一个指向 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%。

所以…

设置高度 = 172 + 19 = 191 像素：高度 = 191 设置底部边距为 -19 像素（将图像缩短为 172 像素高）： 边距底部：-19px 设置顶部位置为 -19 像素（移动图像向上，以便顶部 19 像素行溢出 & 被隐藏而不是底部）：顶部：-19px

生成的 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>

如您所见，我选择设置包含 标记的样式，但您也可以设置