如何自动裁剪和中心的图像
给定任意图像，我想从图像的中心裁剪一个正方形，并将其显示在给定的正方形内。
这个问题类似于这样： CSS显示一个图像resize和裁剪 ，但我不知道图像的大小，所以我不能使用设置边距。
一种解决scheme是使用大小为裁剪尺寸的元素中的背景图像。
基本的例子
.center-cropped { width: 100px; height: 100px; background-position: center center; background-repeat: no-repeat; } <div class="center-cropped" style="background-image: url('http://placehold.it/200x200');"> </div>
我正在寻找一个纯粹的CSS解决scheme使用img标签（而不是背景图像的方式）。
我发现这个很棒的方式来实现http://jonathannicol.com/blog/2014/06/16/centre-crop-thumbnails-with-css/的目标：;
.thumbnail { position: relative; width: 200px; height: 200px; overflow: hidden; } .thumbnail img { position: absolute; left: 50%; top: 50%; height: 100%; width: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .thumbnail img.portrait { width: 100%; height: auto; }
这与@Nathan Redblur的答案类似，但它也允许肖像图像。
对我来说就像一个魅力。 你需要知道的唯一的图像是否是肖像或风景为了设置.portrait类，所以我不得不使用一点的JavaScript的这部分。
带有img标签但没有background-image示例
这个解决scheme保留了img标签，这样我们不会失去拖动或右键单击来保存图像的能力，但是没有background-image只是居中和用css裁剪。
除非是非常高的图像，否则保持宽高比。 （检查链接）
（在行动中看法）
标记
<div class="center-cropped"> <img src="http://placehold.it/200x150" alt="" /> </div>
CSS
div.center-cropped { width: 100px; height: 100px; overflow:hidden; } div.center-cropped img { height: 100%; min-width: 100%; left: 50%; position: relative; transform: translateX(-50%); }
试试这个：设置你的图像裁剪尺寸，并在你的CSS中使用这一行：
object-fit: cover;
我使用@ Russ's和@ Alex的答案创build了一个angularjs指令
2014年及以后可能会有趣：P
HTML
<div ng-app="croppy"> <cropped-image src="http://placehold.it/200x200" width="100" height="100"></cropped-image> </div>
JS
angular.module('croppy', []) .directive('croppedImage', function () { return { restrict: "E", replace: true, template: "<div class='center-cropped'></div>", link: function(scope, element, attrs) { var width = attrs.width; var height = attrs.height; element.css('width', width + "px"); element.css('height', height + "px"); element.css('backgroundPosition', 'center center'); element.css('backgroundRepeat', 'no-repeat'); element.css('backgroundImage', "url('" + attrs.src + "')"); } } });
小提琴链接
尝试这个：
#yourElementId { background: url(yourImageLocation.jpg) no-repeat center center; width: 100px; height: 100px; }
请记住，如果您的DOM元素具有布局（块显示的元素，如div或img ）， width和height将仅适用。 如果不是（例如跨度），则添加display: block; 到CSS规则。 如果您无法访问CSS文件，请将样式内联放置在元素中。
还有另一种方法可以裁剪图像为中心：
.thumbnail{position: relative; overflow: hidden; width: 320px; height: 640px;} .thumbnail img{ position: absolute; top: -999px; bottom: -999px; left: -999px; right: -999px; width: auto !important; height: 100% !important; margin: auto; } .thumbnail img.vertical{width: 100% !important; height: auto !important;}
唯一需要的是将垂直图像添加到垂直图像，您可以使用下面的代码：
jQuery(function($) { $('img').one('load', function () { var $img = $(this); var tempImage1 = new Image(); tempImage1.src = $img.attr('src'); tempImage1.onload = function() { var ratio = tempImage1.width / tempImage1.height; if(!isNaN(ratio) && ratio < 1) $img.addClass('vertical'); } }).each(function () { if (this.complete) $(this).load(); }); });
注意：“！important”用于覆盖img标签上可能的宽度，高度属性。
