如何使用CSS将图像居中并裁剪为正方形？

Question

我需要使用CSS将一个随机大小的图像总是剪裁为一个160x160的正方形。当被剪裁时，图像应该保持居中。

我的标记应该是：

<a href="#" class="cropper">
   <img src="image" alt="description" />
</a>

通过在StackOverflow上搜索，我找到了一些答案（例如CSS - 如何将图像裁剪成正方形，如果已经是正方形则调整大小），但它们不能适用于图像横向较大（宽）或纵向较大（高）的情况。

具体来说，我需要能够呈现像这样的宽图像： 以及像这样的高图像： 以正方形形式展示，而不事先知道哪一个是横向矩形或纵向矩形。 它还应支持已经是正方形的图像。

- PurpleFoxy

---

也许不是你想要的答案，但为什么不尝试一下 background-size:cover 呢？ - RienNeVaPlu͢s

它可以被裁剪成固定的尺寸吗？ - Itay

你是指像这样的吗？http://jsfiddle.net/J7a5R/2/ - MisterBla

@Itay 是的，抱歉应该要裁剪到固定大小。 - PurpleFoxy

https://dev59.com/M2Up5IYBdhLWcg3wmYct?rq=1 - SachinGutte

Answer 1

jsFiddle演示

div {
    width: 250px;
    height: 250px;
    overflow: hidden;
    margin: 10px;
    position: relative;
}
img {
    position: absolute;
    left: -1000%;
    right: -1000%;
    top: -1000%;
    bottom: -1000%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}

<div>
    <img src="https://i.postimg.cc/TwFrQXrP/plus-2.jpg" />
</div>

---

关于尺寸的说明

正如Salman A在评论中提到的那样，我们需要设置img的位置坐标（上、左、下、右）以便与高于图像实际尺寸的百分比一起使用。我在上面的示例中使用了1000%，但当然您可以根据需要进行调整。

进一步解释：当我们将的左侧和右侧（或者上部和底部）坐标设置为包含

的-100%时，的整体允许宽度（或高度）最多可以是包含

的宽度（或高度）的300％，因为它是

的宽度（或高度）和左侧和右侧（或上部和底部）坐标之和。请保留HTML标签。

- Itay

---

我需要让它们适应“缩略图”空间。 - PurpleFoxy

如果图像比 div 更大，最好为纵向图像的 img 标签设置 width: 100%，或者为横向图像设置 height: 100%。 - hiroshi

如果图像的大小超过div大小的300％，它能正常工作吗？[我认为不行。FIDDLE]（http://jsfiddle.net/salman/J7a5R/465/） - Salman A

@SalmanA 你说得对。但是它在其他方面表现还不错。我想它可以改进。 - Itay

@Itay 可以使用一个大的（但合理的）数字，而不是 100%。 - Salman A

Answer 2

object-fit属性可以实现神奇的效果。在JsFiddle上查看。

CSS

.image {
  width: 160px;
  height: 160px;
}

.object-fit_fill {
  object-fit: fill
}

.object-fit_contain {
  object-fit: contain
}

.object-fit_cover {
  object-fit: cover
}

.object-fit_none {
  object-fit: none
}

.object-fit_scale-down {
  object-fit: scale-down
}

HTML

<div class="original-image">
  <p>original image</p>
  <img src="http://lorempixel.com/500/200">
</div>

<div class="image">
  <p>object-fit: fill</p>
  <img class="object-fit_fill" src="http://lorempixel.com/500/200">
</div>

<div class="image">
  <p>object-fit: contain</p>
  <img class="object-fit_contain" src="http://lorempixel.com/500/200">
</div>

<div class="image">
  <p>object-fit: cover</p>
  <img class="object-fit_cover" src="http://lorempixel.com/500/200">
</div>

<div class="image">
  <p>object-fit: none</p>
  <img class="object-fit_none" src="http://lorempixel.com/500/200">
</div>

<div class="image">
  <p>object-fit: scale-down</p>
  <img class="object-fit_scale-down" src="http://lorempixel.com/500/200">
</div>

Result

- Turdaliev Nursultan

---

这绝对是一个不错的选择，除非你真的需要支持IE。即使如此，更好的做法可能是告知用户他们需要切换到现代浏览器... - Danish Ashfaq

很高兴知道这个存在！希望很快能够实现完全的跨浏览器兼容性。 - Alvaro

Answer 3

<div>
    <img class="crop" src="http://lorempixel.com/500/200"/>
</div>

<img src="http://lorempixel.com/500/200"/>




div {
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin: 10px;
    position: relative;
}
.crop {
    position: absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto; 
    height: auto;
    width: auto;
}

http://jsfiddle.net/J7a5R/56/

- DeathGrip

---

非常完美，我认为这将是正确的答案。 - Lloople

当使用超出比例 500x200/250x100 的图像时，此解决方案无法正常工作。 - Ron van der Heijden

Answer 4

在不考虑IE和一些老的移动浏览器无法使用的情况下，简单地使用object-fit: cover;通常是最好的选择。

.cropper {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
}
.cropper img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

没有支持 object-fit: cover 的情况下，图像将会被拉伸以适应盒子大小，所以如果需要 IE 的支持，建议使用其他答案中使用 -100% 上、左、右和下的值作为备选方案。 http://caniuse.com/#feat=object-fit

- Matt Fletcher

Answer 5

尝试将您的图像放入容器中，如下所示：

HTML：

<div>
    <img src="http://www.testimoniesofheavenandhell.com/Animal-Pictures/wp-content/uploads/2013/04/Dog-Animal-Picture-Siberian-Husky-Puppy-HD-Wallpaper.jpg" />
</div>

CSS（层叠样式表）：

div
{
    width: 200px;
    height: 200px;
    overflow: hidden;
}

div > img
{
    width: 300px;
}

这里有一个fiddle。

- MisterBla

---

@PurpleFoxy 如果使用更方形的图像会效果更好，你可能需要调整一下尺寸。 - MisterBla

Answer 6

clip属性和position属性结合使用可能会有所帮助。

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

a img{
position:relative;
left:-50%;
top:-50%;
 }

工作的Fiddle

- RbG

Answer 7

我在下面的链接中找到了更好的解决方案。只需使用“object-fit”即可。 https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

- khoa

---

值得注意的是，这在IE中不受支持。 - Clay Banks

这基本上只是重复这个现有答案。 - Pang

Answer 8

<div style="specify your dimension:overflow:hidden">
    <div style="margin-top:-50px">
       <img ...  />
    </div>
</div>

以上将从图像顶部裁剪50px。根据图像的尺寸，您可能需要计算出一个适合您要求的顶部边距。

要从底部裁剪，只需指定外部 div 的高度并删除内部 div。对于从侧面裁剪，应用相同的原理。

- Omirp

---

以这种方式，我需要知道图像是矩形还是水平的，我还需要知道需要移动图像多少像素。这样并不是一个解决方案。 - PurpleFoxy

Answer 9

HTML：

<div class="thumbnail">
</div>

CSS：

.thumbnail { 
background: url(image.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
width: 250px;
height: 250px;
}

- Priya

Answer 10

2023答案

img {
  width: 200px; /* Determines square size */
  aspect-ratio: 1/1; /* Will keep height equal to width */
  object-fit: cover; 
}

<img src="https://istack.dev59.com/HkGvg.webp" />

- Ben Carp