如何自动裁剪和居中图像

Question

给定任意图像,我想从图像的中心裁剪一个正方形并在给定的正方形内显示它.

这个问题类似于:CSS显示图像大小和裁剪,但我不知道图像的大小,所以我不能使用设置边距.

Answer 1

一种解决方案是使用以尺寸为裁剪尺寸的元素为中心的背景图像.

基本的例子

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

img标签示例

此版本保留img标记,以便我们不会失去拖动或右键单击以保存图像的功能.感谢帕克贝内特不透明度伎俩.

.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

请参见支持的浏览器.

的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" />

Answer 2

我正在寻找使用img标签的纯CSS解决方案(不是背景图像方式).

我找到了这种用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.

Answer 3

试试这个:设置你的图像裁剪尺寸并在你的CSS中使用这一行:

object-fit: cover;

Answer 4

带img标签的示例但没有background-image

这个解决方案保留了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%);
}

Answer 5

我使用@ Russ和@ Alex的答案创建了一个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 + "')");
          }
      }
  });

小提琴链接