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

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

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

我所做的是创建一个服务器端脚本，它将在服务器端调整大小和裁剪图片，这样它就会在互联网上发送更少的数据。

它相当简单，但如果有人感兴趣，我可以挖掘并发布代码(asp.net)

生活例子: 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/

使用CSS3，可以通过background-size来改变背景图像的大小，同时实现这两个目标。

在css3.info上有很多例子。

基于您的示例实现，使用donald_duck_4.jpg。在本例中，background-size: cover;正是你想要的-它适合背景图像覆盖整个区域的包含<div>和剪辑多余的部分(取决于比例)。

.with-bg-size { 背景图片:url (https://i.stack.imgur.com/wPh0S.jpg); 宽度:200 px; 身高:100 px; 背景位置:中心; /*使背景图像覆盖<div>的区域，并剪辑多余的*/ background-size:封面; ｝ <div class="with-bg-size">唐老鸭!< / div >

Css3 background-image background-size

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

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

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