Ответ 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>

Ответ 2

Я искал чистое решение CSS, используя теги 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 для этой части.

Ответ 3

Пример с тегом 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%);
}

Ответ 4

Попробуйте это: установите размеры обрезки изображения и используйте эту строку в своем CSS:

object-fit: cover;

Ответ 5

Я создал директиву angularjs, используя ответы @Russ и @Alex

Может быть интересно в 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 + "')");
          }
      }
  });

ссылка на скрипку

Ответ 6

Попробуйте следующее:

#yourElementId
{
    background: url(yourImageLocation.jpg) no-repeat center center;
    width: 100px;
    height: 100px;
}

Имейте в виду, что width и height будут работать только в том случае, если ваш элемент DOM имеет макет (элемент отображения блока, например, div или img). Если это не (например, диапазон), добавьте display: block; в правила CSS. Если у вас нет доступа к файлам CSS, оставьте стили inline в элементе.

Ответ 7

Существует другой способ обрезать изображение по центру:

.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" используется для переопределения возможных атрибутов width, height на теге img.