style="background-image:

url('https://i.stack.imgur.com/wPh0S.jpg');

width:200px;

height:100px;

background-position:center;">

给我：

我怎么能两个都做？

调整图像大小，然后将其剪切为我想要的大小？

您可以使用两种方法的组合，例如。

.crop {

width: 200px;

height: 150px;

overflow: hidden;

}

.crop img {

width: 400px;

height: 300px;

margin: -75px 0 0 -100px;

}

您可以使用负margin在内移动图像。

请注意，如果在包含的图像上设置position：relative，则需要在包含div上设置position：relative。如果你不这样做，我发现IE实际上不会剪辑图像。

也从.crop img类中删除高度

@ waqar-alamgir如果删除了高度声明，它将无法工作

另请注意，使用css裁剪图像时，用户仍需下载图像。在将图像发送给用户之前，最好使用php和GD或其他图像编辑库来调整图像大小并裁剪图像。这一切都取决于你想要什么，加载服务器或用户带宽。

只是其他人的注意事项：.crop高度和宽度定义了切割图像最底部和最右边部分的位置。 .crop img的高度和宽度将缩放图像。 .crop img margin将平移图像

@sanchothefat假设我们不知道图像大小。我们需要使用Javascript指定保证金。对？这样会导致闪烁效果。你能想到其他任何解决方案吗？

@Jeevan隐藏图像，直到你的JS运行使用visibility：hidden;

@collindo是的。它会像一次渲染一样工作。假设您在SERP中呈现某些内容，即在您键入时搜索。而您正在使用它来显示搜索结果的图像。因此，每次隐藏可见性时，图像都会闪烁。

@Jeevan如果实施得好，它将适用于任何场景。例如，使用特殊类js-hide-until-loaded渲染图像，然后在图像onload事件触发时删除该类。 οnlοad="doSomething(this); $(this).removeClass(js-hide-until-loaded)"

@collindo我最初关注的是它的可见性：隐藏，然后让它可见。因为我们每隔一秒更新一次div就会引起轻微的闪烁。当文本在SERP中闪烁但图像不同时，你无法说出来。

有没有办法让裁剪的图像响应？ coding.smashingmagazine.com/2011/01/12/

@skibulk你只需要在图像上使用百分比宽度和最大宽度。同样的方法仍然适用

使用CSS3，可以使用background-size更改background-image的大小，同时实现两个目标。

css3.info上有很多例子。

根据您的示例实现，使用donald_duck_4.jpg。在这种情况下，background-size: cover;就是您想要的 - 它适合background-image覆盖包含的整个区域并剪切多余的区域(取决于比率)。

.with-bg-size {

background-image: url('https://i.stack.imgur.com/wPh0S.jpg');

width: 200px;

height: 100px;

background-position: center;

/* Make the background image cover the area of the , and clip the excess */

background-size: cover;

}

Donald Duck!

css3 background-image background-size

很好的解决方案，但有一点需要注意的是，它与IE <9不兼容(如果这对任何人都重要)。另外，我想提一下，如果你用cover替换cover为background-size，它会缩放，但不会裁剪图像。

是否可以使用img标签？

对于标记，请查看CSS图像值和替换内容模块级别3规范中的object-fit: cover和相关值。

你试过用这个吗？

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

我需要调整图像大小，居中(垂直和水平)并裁剪它。

我很高兴地发现，它可以在单个css-line中完成。

请查看此处的示例：http：//codepen.io/chrisnager/pen/azWWgr/？edit = 110

以下是该示例中的CSS和HTML代码：

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

original

object-fit: cover

style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">

谢谢，我认为这是最容易和最普遍的方式 - 但它似乎不适用于IE：/在这里找到文档：developer.mozilla.org/de/docs/Web/CSS/object-fit

IE11或EDGE(14)caniuse.com/#feat=object-fit不支持CSS3对象适配

@ eye-wonder它在Edge 16中得到支持，即将推出。如果它非关键并且节约使用，它可以在今天使用

在CSS3中，我们可以尝试img + object-fit或div + background-image。到目前为止，根据我的经验，背景图像可用于适应更多条件。

截至目前，这也得到了Edge的支持(不知道从什么时候开始)。

.imgContainer {

overflow: hidden;

width: 200px;

height: 100px;

}

.imgContainer img {

width: 200px;

height: 120px;

}

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

img {

position: absolute;

clip: rect(0px, 140px, 140px, 0px);

}

谢谢sanchothefat。

我对你的答案有所改进。由于裁剪非常适合每个图像，因此这个定义应该是HTML而不是CSS。

object-fit may help you, if you're playing with tag

以下代码将为您裁剪图像。你可以玩对象

img {

object-fit: cover;

width: 300px;

height: 337px;

}

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

.crop {

width: 282px;

height: 282px;

overflow: hidden;

}

.crop span.img {

background-position: center;

background-size: cover;

height: 282px;

display: block;

}

html看起来像：

img {

position: absolute;

clip: rect(0px,60px,200px,0px);

}

实例：

https://jsfiddle.net/de4Lt57z/

HTML：

CSS：

.crop img{

width:400px;

height:300px;

position: absolute;

clip: rect(0px,200px, 150px, 0px);

}

说明：

此处图像的大小由图像的宽度和高度值调整。裁剪是由剪辑属性完成的。

有关剪辑属性的详细信息如下：

.crop {

float: left;

margin: .5em 10px .5em 0;

overflow: hidden; /* this is important */

position: relative; /* this is important too */

border: 1px solid #ccc;

width: 150px;

height: 90px;

}

.crop img {

position: absolute;

top: -20px;

left: -55px;

}

您可以将img标记放在div标记中并执行这两个操作，但我建议不要在浏览器中缩放图像。由于浏览器具有非常简单的缩放算法，因此它在大多数时间都是糟糕的工作。最好先在Photoshop或ImageMagick中进行缩放，然后将它提供给客户端，非常漂亮。

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

这是相当微不足道的，但如果有人有兴趣，我可以挖掘并发布代码(asp.net)

CGI可能是最便携的方法(并且带宽有效)，除非OP打算允许用户通过Javascript执行自己的大小调整和裁剪。

像Filestack这样的服务会为你做这件事。

它们会显示您的图片网址，并允许您使用网址参数调整其大小。这很容易。

在调整为200x100但保持纵横比后，您的图像将如下所示

整个网址看起来像这样

https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg

但重要的是公平

resize=width:200/crop=d:[0,25,200,100]

哈哈哈好插头

好的插头可能 - 但同样 - 一个很棒的服务(不，我没有付钱说这个;-)) - 我真的刚刚注册，它非常酷

如果您使用的是Bootstrap，请尝试使用{ background-size: cover;

}作为，也可以给div一个类说，这样它就变成了

div.example{

background-size: cover}

我最近需要这样做。我想制作一个NOAA图表的缩略图链接。由于他们的图表可以随时更改，我希望我的缩略图随之改变。但是他们的图表有一个问题：它顶部有一个巨大的白色边框，所以如果你只是缩放它来制作缩略图，你最终会在文档中留下无关的空白。

这是我解决它的方式：

http://sealevel.info/example_css_scale_and_crop.html

首先，我需要做一点算术。 NOAA的原始图像是960×720像素，但前七十个像素是多余的白色边框区域。我需要一个348×172的缩略图，顶部没有额外的边框区域。这意味着原始图像的期望部分是720-70 = 650像素高。我需要将其缩小到172像素，即172/650 = 26.5％。这意味着需要从缩放图像的顶部删除70 = 19行像素中的26.5％。

所以…

设置高度= 172 + 19 = 191像素：

高度= 191

将下边距设置为-19像素(将图像缩短为172像素高)：

下边距：-19px

将顶部位置设置为-19像素(向上移动图像，使前19个像素行溢出并隐藏而不是底部)：

顶部：-19px

生成的HTML如下所示：

style="border:0;position:relative;margin-bottom:-19px;top:-19px"

src="…">

正如您所看到的，我选择了包含标签的样式，但您可以设置样式。

这种方法的一个工件是，如果显示边框，则顶部边框将丢失。因为无论如何我使用border = 0，这对我来说不是问题。

.crop {

width: 200px;

height: 150px;

overflow: hidden;

}

.crop img {

width: 100%;

/*Here you can use margins for accurate positioning of cropped image*/

}