CSS展示被调整大小和裁剪的图片

Question

I want to show an image from an URL with a certain width and height even if it has a different size ratio. So I want to resize (maintaining the ratio) and then cut the image to the size I want.

I can resize with html img property and I can cut with background-image.
How can I do both?

Example:

This image:

Has the size 800x600 pixels and I want to show like an image of 200x100 pixels

With img I can resize the image 200x150px:

<img 
    style="width: 200px; height: 150px;" 
    src="http://i.stack.imgur.com/wPh0S.jpg">

That gives me this:

<img style="width: 200px; height: 150px;" src="https://istack.dev59.com/wPh0S.webp">

And with background-image I can cut the image 200x100 pixels.

<div 
    style="background-image:
           url('https://istack.dev59.com/wPh0S.webp'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

Gives me:

    <div style="background-image:url('https://istack.dev59.com/wPh0S.webp'); width:200px; height:100px; background-position:center;">&nbsp;</div>

How can I do both?
Resize the image and then cut it the size I want?

- DK39

Answer 1

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

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }

    <div class="crop">
        <img src="https://istack.dev59.com/wPh0S.webp" alt="Donald Duck">
    </div>

可以使用负的margin在<div/>内移动图片。

- sanchothefat

---

请注意，如果在包含的图像上设置了position:relative属性，那么您需要在包含的div上也设置position:relative属性。否则，在IE浏览器中，图像将不会被正确地裁剪。 - Frank Schwieterman

请注意，使用CSS裁剪图像时，用户仍然需要下载该图像。最好在将图像发送给用户之前使用PHP和GD或其他图像编辑库来调整大小和裁剪图像。这完全取决于您想要的是加载服务器还是用户带宽。 - J-Rou

给其他人提醒一下：.crop的高度和宽度定义了从图像底部和右侧切割的位置。.crop img的高度和宽度将缩放图像。.crop img的边距将平移图像。 - Frederik

有没有办法使裁剪后的图像具有响应性？http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ - skibulk

@skibulk，你只需要使用百分比宽度，可能还要在图像上设置最大宽度。相同的方法仍然适用。 - roborourke

Answer 2

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

在css3.info上有许多示例。

根据您的示例实现, 使用donald_duck_4.jpg。在这种情况下，background-size: cover;正是您想要的 - 它将background-image调整到覆盖包含的<div>的整个区域，并裁剪多余部分（取决于比例）。

.with-bg-size {
  background-image: url('https://istack.dev59.com/wPh0S.webp');
  width: 200px;
  height: 100px;
  background-position: center;
  /* Make the background image cover the area of the <div>, and clip the excess */
  background-size: cover;
}

<div class="with-bg-size">Donald Duck!</div>

{{链接1：css3}} {{链接2：background-image}} {{链接3：background-size}}

- Joel Purra

---

很棒的解决方案，但有一个注意点是它不兼容IE <9（如果这对任何人还有影响的话）。另外，我想提一下，如果你将background-size中的cover替换为contain，它会进行缩放，但不会裁剪图像。 - devnate

对于<img />标签，请查看CSS图像值和替换内容模块3级规范中的object-fit: cover和相关值。 - Joel Purra

Answer 3

你尝试使用过这个吗？

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

我需要调整图像大小，使其垂直和水平居中，然后再剪裁。

我很高兴发现这可以在单个CSS行中完成。请查看此示例：http://codepen.io/chrisnager/pen/azWWgr/?editors=110

---

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

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

<h1>original</h1>
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
    
<h1>object-fit: cover</h1>
<img class="centered-and-cropped" width="200" height="200" 
style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">

- Anatolii Stepaniuk

---

谢谢，我认为这是最简单和最通用的方法 - 但它似乎在IE上不起作用 :/在此处查找文档：https://developer.mozilla.org/de/docs/Web/CSS/object-fit - mozzbozz

CSS3的object-fit在IE11或EDGE(14)中不受支持 http://caniuse.com/#feat=object-fit - eye-wonder

@eye-wonder它在Edge 16中得到支持，该版本即将推出。如果它并非必需且使用不频繁，则可以立即使用。 - Ray Foss

在CSS3中，我们可以尝试使用img+object-fit或div+background-image两种方式。就我个人的经验而言，background-image可以适用更多的情况。 - Eric

目前，Edge浏览器也支持此功能（不过我不知道从什么时候开始）。 - Gerald Schneider

IE9+有一个object-fit polyfill https://github.com/constancecchen/object-fit-polyfill/blob/master/README.md - Vincente

Answer 4

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

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

包含图片的 div 元素通过隐藏溢出部分，实现了将图片进行裁剪的效果。

- Kelly Anderson

Answer 5

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

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

- Rohit Chaudhary

Answer 6

在之前的答案中，可以增加一些关于 object-fit: cover 的内容：

object-position

你可以使用 object-position 属性来改变替换元素内容对象在元素框内的对齐方式。

.trimmed-cover {
  object-fit: cover;
  width: 100%;
  height: 177px;
  object-position: center 40%;
}

<img class="trimmed-cover" src="http://i.stack.imgur.com/wPh0S.jpg">

- Mahmoud

Answer 7

感谢sanchothefat。

我对您的答案有所改进。由于裁剪针对每个图像都是非常专门的，因此这些定义应该在HTML中而不是CSS中。

<div style="overflow:hidden;">
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>

- Pedro Reis

Answer 8

object-fit 可以帮助你，如果你正在使用 <img> 标签

以下代码将为您裁剪图像。 您可以尝试使用object-fit

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

- Hidayt Rahman

---

这让我很开心 - 我可以轻松地将其附加到我的漂亮滑块轮播实现中 - 纯IMG对象解决方案，而不需要触及“滑块插件的代码库”。 - andreas-supersmart

这就是 CSS 的优点 :) - Hidayt Rahman

Answer 9

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

- 151291

Answer 10

尝试使用clip-path属性：

该属性允许您将元素剪切为基本形状或SVG源。

注意：该属性将替换被弃用的剪辑（clip）属性。

img {
  width: 150px;
  clip-path: inset(30px 35px);
}

<img src="http://i.stack.imgur.com/wPh0S.jpg">

更多示例在此处。

- Emeric