尝试使用clip-path属性:

剪切路径属性允许您将元素剪切为基本形状或 SVG源代码。 注意:clip-path属性将替换已弃用的剪辑 财产。

img { 宽度:150 px; 剪辑路径:插入(30px 35px); ｝ < img src = " http://i.stack.imgur.com/wPh0S.jpg " >

这里有更多的例子。

如果你正在使用Bootstrap，尝试使用{background-size: cover; }对于<div>可能给div一个类说<div class="example" style=url('../your_image.jpeg');>所以它变成 div.example { background-size:封面}

你试过用这个吗?

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

我需要调整图像的大小，中心(垂直和水平)，然后裁剪它。

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

下面是这个例子的CSS和HTMLcode:

.居中剪裁{对象合身:封面} <标题>原始h1 > < / <img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="熊"> <标题> object-fit:封面h1 > < / <img class="center -and-裁剪" width="200" height="200" style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="熊">

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

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

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

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

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