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

Question

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

我的标记应该是:

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

搜索在计算器上我找到了一些答案(如本),但他们不为情况下,你的图像可以是更大的工作水平(宽)或垂直(高).

具体而言,我需要能够呈现一个都像这样宽的图像和类似这样的高图像在正方形的形式,没有预先知道哪一个是呈横长方形或垂直矩形.它还应该支持已经平方的图像.

Answer 1

jsFiddle演示

div
{
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin: 10px;
    position: relative;
}
img {
    position: absolute;
    margin: auto; 
    min-height: 100%;
    min-width: 100%;

    /* For the following settings we set 100%, but it can be higher if needed 
    See the answer's update */
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
}

更新 - 改进

正如Salman A在评论中提到的那样,原始解决方案有一个缺陷 - 如果img的高度或宽度(或两者)比(包含div)大3倍*大,它就不能很好地工作.

问题在这里显示.

萨尔曼也提供了一个非常简单和优雅的解决方案.我们只需要更新img的位置坐标(顶部,左侧,底部,右侧)以使用更高的百分比.以下修复程序适用于1000%,但您当然可以根据需要进行调整.

此处显示了修复程序.

*原因是,当我们设置IMG的左和右(或:顶部和底部)坐标为-100% (含的DIV),整体允许宽度(或:高度)的的IMG,可以是至多300%的含有格的宽度(或:高度),因为它是的总和的div的宽度(或:高度)和左和右(或:顶部和底部)坐标.

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>

结果

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/

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% top，left，right和bottom值作为备用。

http://caniuse.com/#feat=object-fit