如何使用 CSS 居中和裁剪图像以始终以方形显示？

Posted 2023-03-05

【中文标题】如何使用 CSS 居中和裁剪图像以始终以方形显示？

【英文标题】：How to center and crop an image to always appear in square shape with CSS?

【发布时间】：2013-09-11 12:08:18

【问题描述】：

我需要始终仅使用 CSS 将随机大小的图像裁剪为 160x160 的正方形。 裁剪后图像应保持居中。

我的标记应该是：

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

在 *** 上搜索我找到了一些答案（例如 CSS - How to crop an image to a square, if it's already square then resize it），但它们不适用于图像可以水平（宽）较大或垂直（高）的情况.

具体来说，我需要能够同时呈现这样的宽幅图像：

还有一个像这样的高大图像：

正方形，事先不知道哪个是水平矩形或垂直矩形。它还应该支持已经平方的图像。

【问题讨论】：

可能不是您要找的答案，但为什么不试试background-size:cover？

可以裁剪成固定尺寸吗？

你的意思是这样的？ jsfiddle.net/J7a5R/2

@Itay 是的，抱歉应该裁剪为固定大小。

***.com/questions/15167545/…

【参考方案1】：

jsFiddle Demo

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>

---

关于尺寸的说明

正如 cmets 中提到的Salman A，我们需要将 img 的位置坐标（上、左、下、右）设置为高于图像实际尺寸的百分比。我在上面的例子中使用了1000%，当然你可以根据自己的需要进行调整。

* 进一步说明：当我们设置img的left和right（或者：top和bottom) 坐标为 -100%（包含 div），整体允许的宽度（或： img 的 height)，最多可以是包含 div 的 width 的 300% （或：height），因为它是div的宽度（或：height）和的总和>left 和 right（或：top 和 bottom）坐标。

【讨论】：

我需要让它们适合“缩略图”空间

如果图片大于div，最好width: 100% 用于纵向图片或height: 100% 用于img 标签。

图片大于 300% 的 div 大小是否有效？ I don't think so. FIDDLE

@SalmanA 你是对的。但它在其他方面工作得很好。我想它可以改进。

@Itay 只是使用大（但合理）的数字而不是 100%。

【参考方案2】：

注意它在 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

【参考方案3】：

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>

结果

【讨论】：

除非您真的需要 IE 支持，否则这绝对是正确的选择。即便如此，最好只通知您的用户他们需要切换到现代浏览器...

很高兴知道它的存在！让我们希望尽快实现全面的跨浏览器兼容性。

【参考方案4】：

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

【讨论】：

值得注意的是IE不支持这个

这或多或少只是重复this existing answer。

【参考方案5】：

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;

【参考方案6】：

<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/

【讨论】：

完美，我认为这将是正确答案

此解决方案在使用超出比例的图像时不起作用500x200/250x100

【参考方案7】：

clip 属性和position 可以帮助你

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


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

WORKING FIDDLE

【参考方案8】：

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

以上内容将从图像顶部裁剪 50 像素。您可能希望根据图像的尺寸计算出符合您要求的上边距。

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

【讨论】：

这样我需要知道图像是矩形的还是水平的，我还需要知道移动图像需要多少像素。根本不是解决方案。

【参考方案9】：

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

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。

【讨论】：

@PurpleFoxy 最好使用更方形的图像，猜你需要稍微调整一下尺寸。