你可以使用Kodem的图片调整服务。您可以通过http调用调整任何图像的大小。可以在浏览器中随意使用，也可以在生产应用程序中使用。

上传图片到你喜欢的地方(S3, imgur等) 将其插入到您的专用API url(从我们的仪表板)

使用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

尝试使用clip-path属性:

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

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

这里有更多的例子。

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

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

你试过用这个吗?

.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>标记，那么Object-fit可能会帮助您

下面的代码将为您裁剪图像。你可以尝试一下合身的衣服

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