一种解决方案是使用背景图像，该背景图像在大小为裁剪尺寸的元素内居中。

基本示例

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
}

<div class="center-cropped" 
     style="background-image: url('https://via.placeholder.com/200');">
</div>

带有img标记的示例

这个版本保留了img标签，这样我们就不会失去拖动或右键单击来保存图像的能力。
一个二个一个一个

object-fit/-position

• 查看支持的浏览器。*

CSS3 Images specification定义了object-fit和object-position属性，这两个属性一起允许对img元素的图像内容的比例和位置进行更好的控制。通过这些属性，可以实现所需的效果：

.center-cropped {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 100px;
  width: 100px;
}

<img class="center-cropped" src="https://via.placeholder.com/200" />

我正在寻找一个纯粹的CSS解决方案使用img标签（而不是背景图像的方式）。
我在crop thumbnails with css上发现了一个实现目标的绝妙方法：

.thumbnail {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.thumbnail img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
  width: 100%;
  height: auto;
}

这和@Nathan Redblur的答案相似，但它也允许肖像图像。
对我来说就像一个护身符。你唯一需要知道的是，为了设置.portrait类，它是肖像还是风景，所以我不得不使用一点Javascript的这一部分。

试试这个：设置你的图像裁剪尺寸，并在你的CSS中使用这一行：

object-fit: cover;

带有img标记但没有background-image的示例

这个解决方案保留了img标签，这样我们就不会失去拖动或右键单击来保存图像的能力，但如果没有background-image，只需使用css居中和裁剪。
除了非常高的图像外，保持高宽比。（查看链接）
(view in action)

加价

<div class="center-cropped">
    <img src="http://placehold.it/200x150" alt="" />
</div>

中央支助组

div.center-cropped {
  width: 100px;
  height: 100px;
  overflow:hidden;
}
div.center-cropped img {
  height: 100%;
  min-width: 100%;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}

我使用@Russ和@Alex的答案创建了angularjs指令
2014年及以后可能会很有趣：P
超文本标记语言

<div ng-app="croppy">
  <cropped-image src="http://placehold.it/200x200" width="100" height="100"></cropped-image>
</div>

日本

angular.module('croppy', [])
  .directive('croppedImage', function () {
      return {
          restrict: "E",
          replace: true,
          template: "<div class='center-cropped'></div>",
          link: function(scope, element, attrs) {
              var width = attrs.width;
              var height = attrs.height;
              element.css('width', width + "px");
              element.css('height', height + "px");
              element.css('backgroundPosition', 'center center');
              element.css('backgroundRepeat', 'no-repeat');
              element.css('backgroundImage', "url('" + attrs.src + "')");
          }
      }
  });

fiddle link

试试这个：

#yourElementId
{
    background: url(yourImageLocation.jpg) no-repeat center center;
    width: 100px;
    height: 100px;
}

请记住，width和height仅在DOM元素具有布局（块显示元素，如div或img）时有效。如果没有布局（例如span），请将display: block;添加到CSS规则中。如果您没有访问CSS文件的权限，请将样式内联到元素中。

还有另一种方法可以裁剪居中的图像：

.thumbnail{position: relative; overflow: hidden; width: 320px; height: 640px;}
.thumbnail img{
    position: absolute; top: -999px; bottom: -999px; left: -999px; right: -999px;
    width: auto !important; height: 100% !important; margin: auto;
}
.thumbnail img.vertical{width: 100% !important; height: auto !important;}

你唯一需要做的就是添加类“vertical”到垂直图像，你可以用下面的代码来完成：

jQuery(function($) {
    $('img').one('load', function () {
        var $img = $(this);
        var tempImage1 = new Image();
        tempImage1.src = $img.attr('src');
        tempImage1.onload = function() {
            var ratio = tempImage1.width / tempImage1.height;
            if(!isNaN(ratio) && ratio < 1) $img.addClass('vertical');
        }
    }).each(function () {
        if (this.complete) $(this).load();
    });
});

注意：“！important”用于覆盖img标记上可能的宽度、高度属性。