jQuery CSS 缩放和方形中心裁剪图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16310918/
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
CSS scale and square center crop image
提问by adit
So I have a collection of thumbnails in my app, which is the size of 200x200. Sometimes the original image doesn't have this ratio so I am planning to crop this image to a square.
所以我的应用程序中有一组缩略图，大小为200x200。有时原始图像没有这个比例，所以我打算将此图像裁剪为正方形。
Currently it just streches the image to fit into the thumbnail, so say my original image size is 400x800, then the image looks very squished. I wanted to crop this image so it looks at the shortest width/height and then crop it to a square, so in my example above it will be cropped to a 400x400.
目前它只是拉伸图像以适应缩略图，所以说我的原始图像大小是400x800，那么图像看起来非常压扁。我想裁剪此图像，使其看起来最短的宽度/高度，然后将其裁剪为正方形，因此在上面的示例中，它将被裁剪为400x400。
Is there a way to easily do this via CSS or do I have to use some sort of JS to do this?
有没有办法通过 CSS 轻松做到这一点，还是我必须使用某种 JS 来做到这一点？
回答by Samuel Liew
You can do this easily in CSS if you use background-image.
如果您使用 background-image，您可以在 CSS 中轻松完成此操作。
.thumb {
display: inline-block;
width: 200px;
height: 200px;
margin: 5px;
border: 3px solid #c99;
background-position: center center;
background-size: cover;
}
In this fiddle, first image is 400x800, second image is 800x400:
在这个小提琴中，第一张图片是 400x800，第二张图片是 800x400：
回答by thefrontender
Updatedto handle cases where image width is greater than height.
更新以处理图像宽度大于高度的情况。
You can do this with pure CSS. Set the container element of each image to have fixed height and width and overflow: hidden. Then set the image within to have min-width: 100%, min-height: 100%. Any extra height or width will overflow the container and be hidden.
你可以用纯 CSS 来做到这一点。将每个图像的容器元素设置为具有固定的高度和宽度以及overflow: hidden。然后将图像设置为具有min-width: 100%, min-height: 100%。任何额外的高度或宽度都会溢出容器并被隐藏。
HTML
HTML
<div class="thumb">
<img src="http://lorempixel.com/400/800" alt="" />
</div>
CSS
CSS
.thumb {
display: block;
overflow: hidden;
height: 200px;
width: 200px;
}
.thumb img {
display: block; /* Otherwise it keeps some space around baseline */
min-width: 100%; /* Scale up to fill container width */
min-height: 100%; /* Scale up to fill container height */
-ms-interpolation-mode: bicubic; /* Scaled images look a bit better in IE now */
}
Have a look at http://jsfiddle.net/thefrontender/XZP9U/5/
回答by Barry T. Smith
I came up with my own solution and thought I would share it here in case anyone else found this thread. The background-size: cover solution is the easiest, but I needed something that would work in IE7 as well. Here's what I came up with using jQuery and CSS.
我想出了我自己的解决方案，并认为我会在这里分享，以防其他人找到这个线程。background-size: cover 解决方案是最简单的，但我需要一些可以在 IE7 中工作的东西。这是我想出的使用 jQuery 和 CSS 的方法。
Note: My images were "profile" images and needed to be cropped to squares. Hence some of the function names.
注意：我的图片是“个人资料”图片，需要裁剪成正方形。因此，一些函数名称。
jQuery:
jQuery：
cropProfileImage = function(pic){
var h = $(pic).height(),
w = $(pic).width();
if($(pic).parent('.profile-image-wrap').length === 0){
// wrap the image in a "cropping" div
$(pic).wrap('<div class="profile-image-wrap"></div>');
}
if(h > w ){
// pic is portrait
$(pic).addClass('portrait');
var m = -(((h/w) * 100)-100)/2; //math the negative margin
$(pic).css('margin-top', m + '%');
}else if(w > h){
// pic is landscape
$(pic).addClass('landscape');
var m = -(((w/h) * 100)-100)/2; //math the negative margin
$(pic).css('margin-left', m + '%');
}else {
// pic is square
$(pic).addClass('square');
}
}
// Call the function for the images you want to crop
cropProfileImage('img.profile-image');
CSS
CSS
.profile-image { visibility: hidden; } /* prevent a flash of giant image before the image is wrapped by jQuery */
.profile-image-wrap {
/* whatever the dimensions you want the "cropped" image to be */
height: 8em;
width: 8em;
overflow: hidden;
}
.profile-image-wrap img.square {
visibility: visible;
width: 100%;
}
.profile-image-wrap img.portrait {
visibility: visible;
width: 100%;
height: auto;
}
.profile-image-wrap img.landscape {
visibility: visible;
height: 100%;
width: auto;
}
