CSS 显示调整大小和裁剪的图像

Question

我想显示来自 URL 的具有特定宽度和高度的图像，即使它具有不同的尺寸比例。所以我想调整大小（保持比例），然后将图像剪切到我想要的大小。

我可以用 html 调整大小 img 财产和我可以削减 background-image.
我怎样才能两者兼得？

例子：

这个图片：

有尺寸 800x600 像素，我想显示为图像 200x100 像素

和 img 我可以调整图像大小 200x150px:

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

这给了我这个：

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

与 background-image 我可以剪图 200x100 像素。

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

给我：

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

我怎样才能两者兼得？
调整图像大小，然后将其剪切为我想要的大小？

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://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
    </div>

Answer 2

使用CSS3可以改变a的大小 background-image 和 background-size, ，同时实现这两个目标。

有 一堆例子 在 CSS3.info.

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

.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 <div>, and clip the excess */
  background-size: cover;
}

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

CSS3 背景图 背景大小

Answer 3

你有没有尝试使用这个？

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

我需要来调整图像，中心（垂直和水平），并比它的作物

我很高兴地发现，它可以在一个CSS在线进行。 这里检查例如： http://codepen.io/chrisnager/pen/azWWgr/ ？编辑= 110

---

下面是从该示例的CSS和HTMLcode：

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