如何居中和裁剪图像始终以CSS呈现方形？
我需要总是只使用CSS将随机大小的图像裁剪为160×160的正方形。 裁剪时图像应保持居中。
我的标记应该是：
<a href="#" class="cropper"> <img src="image" alt="description" /> </a> 在StackOverflow上search我已经find了一些答案（比如这个 ），但是它们不适用于你的图像可能更大的水平（宽） 或垂直（高）的情况。
具体地说，我需要能够呈现出像这样的宽的图像和像这样的正方形的高图像 ，而不必事先知道哪一个是水平矩形或垂直矩形。 它也应该支持已经平方的图像。
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%; }
更新 – 改进
正如萨尔曼在评论中提到的，原来的解决scheme有一个缺陷 – 如果img的高度或宽度（或两者）比包含div大（至less）3倍，则效果不佳。
问题在这里显示。
萨尔曼也给了一个非常简单和优雅的修复。 我们只需要更新img的位置坐标（顶部，左侧，底部，右侧），以更高的百分比工作。 以下修补程序适用于1000％ ，但当然可以根据您的需要进行调整。
此处显示修复程序。
*原因在于，当我们将img的左右 （或顶部和底部 ）坐标设置为（包含div的 ） -100％时， img的总体允许宽度 （或： 高度 ）可以是因为它是div宽度（或： height ）和左右 （或顶部和底部 ）坐标的总和，所以它至多为包含div的宽度 （或高度 ）的300％ 。
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>
结果
<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; }
尝试把你的图像放入一个容器中，如下所示：
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; }
这是一个小提琴 。
与position clip属性可能会帮助你
a{ position:absolute; clip:rect(0px,200px,200px,0px); } a img{ position:relative; left:-50%; top:-50%; }
工作的快乐
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; }
由于它不适用于IE和一些旧的移动浏览器，一个简单的object-fit: cover; 往往是最好的select。
.cropper width: 100px; height: 100px; position: relative; overflow: hidden; .cropper img position: absolute; width: 100%; height: 100%; object-fit: cover;
没有object-fit: cover支持，图像将被拉伸奇怪，以适应框，所以，如果需要支持IE浏览器，我build议使用其他答案的方法之一， -100%顶部，左侧，右侧和底部值作为后备。
<div style="specify your dimension:overflow:hidden"> <div style="margin-top:-50px"> <img ... /> </div> </div>
上面将从图像顶部裁剪50px。 您可能需要根据图像的尺寸计算出一个满足您要求的上边距。
从底部裁剪只需指定外部div的高度，并删除内部的div。 从侧面应用相同的原则。
我在下面的链接find了更好的解决scheme。 只能使用“object-fit” https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87
