一种解决方案是使用以裁剪尺寸为中心的元素内的背景图像。

基本的例子

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

<div class="center-cropped"
style="background-image: url('http://placehold.it/200x200');">
</div>

带有 img标记的示例

这个版本保留了 img标签，这样我们就不会失去拖动或右键单击来保存图像的能力。这要归功于 Parker Bennett的不透明技巧。

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


/* Set the image to fill its parent and make transparent */
.center-cropped img {
min-height: 100%;
min-width: 100%;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* modern browsers */
opacity: 0;
}

<div class="center-cropped"
style="background-image: url('http://placehold.it/200x200');">
<img src="http://placehold.it/200x200" />
</div>

object-fit/-position

参见支持的浏览器 。

CSS3图像规范定义了 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="http://placehold.it/200x200" />

试试这个:

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

请记住，width和 height只有在 DOM 元素具有布局(块显示的元素，如 div或 img)时才能工作。如果它不是(例如，一个 span) ，将 display: block;添加到 CSS 规则中。如果您无法访问 CSS 文件，请将样式放在元素中的内联位置。

我用 Russ 和 Alex 的回答创建了一个 angularjs 指令

2014年及以后可能会很有趣:

Html

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

JS

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 + "')");
}
}
});

小提琴连杆

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

这个解决方案保留了 img标签，所以我们不会失去拖动或右键单击保存图像的能力，但没有 background-image只是中心和 CSS 裁剪。

除了非常高的图片，要保持好的高宽比。(查看链接)

(视图中的行动)

加价

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

CSS

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%);
}

我正在寻找一个纯 CSS 解决方案使用 img标签(而不是背景图像的方式)。

我找到了这个在 带 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 Red 的回答，但是它也允许人物肖像。

对我来说很有效。关于这个图像，您需要知道的唯一一件事情是它是纵向的还是横向的，以便设置 .portrait类，因此我不得不为这个部分使用一些 Javascript。

还有另外一种以图像为中心的裁剪方法:

.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;}

你唯一需要做的就是将类“竖直”添加到垂直图像中，你可以使用下面的代码:

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 标记上的可能的 width、 height 属性。

试试这个: 设置图像裁剪尺寸并在 CSS 中使用这条线:

object-fit: cover;