更新 - 改进

Question

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

我的标记应该是：

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

在StackOverflow上搜索我发现了一些答案（例如this），但它们不适用于图像可以更大的水平（宽）或垂直的情况（高）。

具体来说，我需要能够以方形形式呈现wide image like this和tall image like this，而不事先知道哪一个是水平矩形或垂直矩形。它还应该支持已经平方的图像。

Answer 1

jsFiddle Demo

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倍*。

问题显示为here。

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

此修复程序显示为here。

*原因是当我们设置 img 的左和右（或： top 时和底部）坐标为 -100％（包含 div ），总体允许宽度（或 img 的 height ），最多只能 300％包含 div 的 width （或： height ），因为它是 div 的宽度（或： height ）和<的总和em> left 和 right （或： top 和 bottom ）坐标。

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%顶部的其他答案之一，左，右和底值作为后备。

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

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。

Answer 6

带有clip的

position媒体资源可以为您提供帮助

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

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

<强> WORKING FIDDLE

Answer 7

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

Answer 8

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

Answer 9

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

以上将从图像顶部裁剪50px。您可能希望根据图像的尺寸进行计算以获得符合您要求的上边距。

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

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

9 个答案:

更新 - 改进