Question

我有HTML并且无法控制它，但我可以完全控制CSS。一个标签是图片标签：

<img src="photo.jpg" alt="" />

我希望控制此图像的大小，使其适合一定的大小，如300px x 200px。我想保持比例，填补我的区域，但切断任何多余的，就像我要做背景＆＃34;覆盖＆＃34;

像这样：

like this http://cdn.onextrapixel.com/wp-content/uploads/2012/02/cover-contain.jpg。

有没有CSS技巧可以做到这一点？还是其他任何技巧？

Answer 1

您可以使用object-fit: cover和object-fit: contain来实现此目标。

.cover {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  object-fit: cover;
}

.contain {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  object-fit: contain;
}

<img class="cover" src="http://placebear.com/300/200">

<img class="contain" src="http://placebear.com/300/200">

......只要你不关心IE。

Answer 2

我认为你正在寻找剪辑属性。

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

来源：http://www.w3schools.com/cssref/pr_pos_clip.asp

改变CSS中的图像大小

2 个答案: