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;
    }

CSS:

    <div class="crop">
        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
    </div>

你可以使用负片margin来移动图像<div/>.

Answer 2

随着CSS3这是可以改变的大小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 background-image background-size

Answer 3

你试过用这个吗？

CSS

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

我很高兴地发现,它可以在单个css-line中完成.请查看此处的示例:http://codepen.io/chrisnager/pen/azWWgr/？edit = 110

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

CSS:

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

HTML:

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

Answer 4

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

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

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

Answer 5

对之前答案的一个小补充包括object-fit: cover：

物体位置

您可以使用 object-position 属性更改元素框中被替换元素的内容对象的对齐方式。

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

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

Answer 6

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

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

Answer 7

谢谢sanchothefat.

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

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

Answer 8

尝试使用该clip-path属性：

剪辑路径属性允许您将元素剪辑为基本形状或 SVG 源。

注意：clip-path 属性将取代已弃用的 Clip 属性。

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

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

更多示例请参见此处。

Answer 9

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

Answer 10

现场示例：https : //jsfiddle.net/de4Lt57z/

HTML：

<div class="crop">
  <img src="example.jpg" alt="..." />
</div>

CSS：

    .crop img{
      width:400px;
      height:300px;
      position: absolute;
      clip: rect(0px,200px, 150px, 0px);
      }

说明： 这里的图像是根据图像的宽度和高度值调整大小的。裁剪是由剪辑属性完成的。

有关剪辑属性的详细信息，请参见：http : //tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

Answer 11

object-fit如果您正在玩<img>标签，可能会对您有所帮助

以下代码将为您裁剪图像。您可以玩适合对象的游戏

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