CSS 如何自动裁剪和居中图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11552380/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to automatically crop and center an image
提问by Jonathan Ong
Given any arbitrary image, I want to crop a square from the center of the image and display it within a given square.
给定任意图像，我想从图像的中心裁剪一个正方形并将其显示在给定的正方形内。
This question is similar to this: CSS Display an Image Resized and Cropped, but I don't know the size of the image so I can't use set margins.
这个问题类似于：CSS Display an Image Resized and Cropped，但我不知道图像的大小，所以我不能使用设置边距。
回答by Russ Ferri
One solution is to use a background image centered within an element sized to the cropped dimensions.
一种解决方案是使用以裁剪尺寸大小的元素为中心的背景图像。
Basic example
基本示例
.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>Example with imgtag
带img标签的示例
This version retains the imgtag so that we do not lose the ability to drag or right-click to save the image. Credit to Parker Bennettfor the opacity trick.
此版本保留了img标签，因此我们不会失去拖动或右键单击以保存图像的能力。归功于Parker Bennett的不透明技巧。
.center-cropped {
width: 100px;
height: 100px;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
}
/* Set the image to fill its parent and make transparent */
.center-cropped img {
min-height: 100%;
min-width: 100%;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* modern browsers */
opacity: 0;
}<div class="center-cropped"
style="background-image: url('http://placehold.it/200x200');">
<img src="http://placehold.it/200x200" />
</div>object-fit/-position
object-fit/-position
The CSS3 Images specificationdefines the object-fitand object-positionproperties which together allow for greater control over the scale and position of the image content of an imgelement. With these, it will be possible to achieve the desired effect:
的CSS3图像规范定义object-fit和object-position属性，它们一起允许对规模更大的控制和一个的图像内容的位置img元素。有了这些，就可以达到预期的效果：
.center-cropped {
object-fit: none; /* Do not scale the image */
object-position: center; /* Center the image within the element */
height: 100px;
width: 100px;
}<img class="center-cropped" src="http://placehold.it/200x200" />回答by gluecksmelodie
I was looking for a pure CSS solution using imgtags (not the background image way).
我正在寻找使用img标签的纯 CSS 解决方案（而不是背景图像方式）。
I found this brilliant way to achieve the goal on 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;
}
It is similar to @Nathan Redblur's answer but it allows for portrait images, too.
它类似于@Nathan Redblur 的答案，但它也允许肖像图像。
Works like a charm for me. The only thing you need to know about the image is whether it is portrait or landscape in order to set the .portraitclass so I had to use a bit of Javascript for this part.
对我来说就像一种魅力。你唯一需要知道的关于图像是纵向还是横向，以便设置.portrait类，所以我不得不在这部分使用一些 Javascript。
回答by Roych
Try this: Set your image crop dimensions and use this line in your CSS:
试试这个：设置你的图像裁剪尺寸并在你的 CSS 中使用这一行：
object-fit: cover;
回答by Nathan Redblur
Example with imgtag but without background-image
带img标签但不带标签的示例background-image
This solution retains the imgtag so that we do not lose the ability to drag or right-click to save the image but without background-imagejust center and crop with css.
该解决方案保留了img标签，这样我们就不会失去拖动或右键单击以保存图像的能力，而background-image不仅仅是使用 css 居中和裁剪。
Maintain the aspect ratio fine except in very hight images. (check the link)
除了非常高的图像外，保持纵横比良好。（检查链接）
Markup
标记
<div class="center-cropped">
<img src="http://placehold.it/200x150" alt="" />
</div>
? CSS
? 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%);
}
回答by mraaroncruz
I created an angularjs directive using @Russ's and @Alex's answers
我使用 @Russ 和 @Alex 的答案创建了一个 angularjs 指令
Could be interesting in 2014 and beyond :P
在 2014 年及以后可能会很有趣：P
html
html
<div ng-app="croppy">
<cropped-image src="http://placehold.it/200x200" width="100" height="100"></cropped-image>
</div>
js
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 + "')");
}
}
});
回答by Alejandro Rizzo
Try this:
尝试这个：
#yourElementId
{
background: url(yourImageLocation.jpg) no-repeat center center;
width: 100px;
height: 100px;
}
Keep in mind that widthand heightwill only work if your DOM element has layout (a block displayed element, like a divor an img). If it is not (a span, for example), add display: block;to the CSS rules. If you do not have access to the CSS files, drop the styles inline in the element.
请记住，width并且height如果你的DOM元素具有布局（块显示的元素，就像一个只会工作，div或img）。如果不是（例如，跨度），请添加display: block;到 CSS 规则中。如果您无权访问 CSS 文件，请将样式内嵌到元素中。
回答by Vedmant
There is another way you can crop image centered:
还有另一种方法可以裁剪图像居中：
.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;}
The only thing you will need is to add class "vertical" to vertical images, you can do it with this code:
您唯一需要的是向垂直图像添加“垂直”类，您可以使用以下代码来完成：
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();
});
});
Note: "!important" is used to override possible width, height attributes on img tag.
注意：“!important”用于覆盖 img 标签上可能的宽度、高度属性。
