javascript - CSS 比例和方形中心裁剪图像

Question

所以我在我的应用程序中有一组缩略图，大小为200x200。有时原始图像没有这个比例，所以我打算把这个图像裁剪成一个正方形。

目前它只是拉伸图像以适应缩略图，所以说我的原始图像尺寸是400x800，那么图像看起来非常挤压。我想裁剪此图像，使其看起来最短的宽度/高度，然后将其裁剪为正方形，因此在我上面的示例中，它将被裁剪为400x400。

有没有办法通过 CSS 轻松做到这一点，还是我必须使用某种 JS 来做到这一点？

Answer 1

如果你使用 background-image，你可以在 CSS 中轻松做到这一点。

.thumb {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 5px;
    border: 3px solid #c99;
    background-position: center center;
    background-size: cover;
}

在这个小提琴中，第一张图片是 400x800，第二张图片是 800x400：

http://jsfiddle.net/samliew/tx7sf

Answer 2

更新以处理图像宽度大于高度的情况。

你可以用纯 CSS 做到这一点。将每个图像的容器元素设置为具有固定的高度和宽度以及overflow: hidden. 然后将图像设置为具有min-width: 100%, min-height: 100%。任何额外的高度或宽度都会溢出容器并被隐藏。

HTML

<div class="thumb">
    <img src="http://lorempixel.com/400/800" alt="" />
</div>

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 */
}

看看http://jsfiddle.net/thefrontender/XZP9U/5/

Answer 3

我想出了自己的解决方案，并认为我会在这里分享它，以防其他人发现这个线程。background-size:cover 解决方案是最简单的，但我需要在 IE7 中也可以使用的东西。这是我使用 jQuery 和 CSS 得出的结论。

注意：我的图像是“个人资料”图像，需要裁剪为正方形。因此，一些函数名称。

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

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