61

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

我的标记应该是：

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

在 StackOverflow 上搜索我找到了一些答案（例如CSS - 如何将图像裁剪为正方形，如果它已经是正方形，则调整它的大小），但它们不适用于图像可以水平（宽）更大的情况或垂直（高）。

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

宽幅图像

和这样的高大图像：

高大的形象

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

4

9 回答 9

104

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%，当然你可以根据自己的需要进行调整。

修复前后

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

于 2013-09-07T14:08:49.587 回答
51

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>

结果

渲染图像的外观（在支持 <code>object-fit</code> 的浏览器中）

于 2016-01-28T13:52:25.137 回答
16 
<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/

于 2014-03-05T08:02:19.113 回答
8

需要注意的是它在 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

于 2015-08-11T13:59:28.123 回答
1

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

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

这是一个小提琴。

于 2013-09-07T13:48:43.063 回答
1

clip属性position可以帮助你

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

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

工作小提琴

于 2013-09-07T14:08:20.320 回答
1

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

于 2017-04-12T08:12:19.450 回答
0 
<div style="specify your dimension:overflow:hidden">
    <div style="margin-top:-50px">
       <img ...  />
    </div>
</div>

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

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

于 2013-09-07T14:01:30.790 回答
0

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;
}
于 2014-08-12T08:49:06.583 回答