Как автоматически обрезать и центрировать изображение

При любом произвольном изображении я хочу обрезать квадрат из центра изображения и отобразить его в пределах заданного квадрата.

Этот вопрос аналогичен этому: CSS Отображение изображения с измененной и обрезанной , но я не знаю размер изображения, поэтому я не могу использовать заданные поля.

Одним из решений является использование фонового изображения с центром в элементе размером до обрезанных размеров.


Основной пример

.center-cropped { width: 100px; height: 100px; background-position: center center; background-repeat: no-repeat; } 
 

Я искал чистое решение CSS, используя tags img (а не путь к фоновому изображению).

Я нашел этот shiny способ достижения цели по эскизам обрезки с помощью 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, но он также позволяет создавать портретные изображения.

Работает как прелесть для меня. Единственное, что вам нужно знать об изображении, – это портрет или пейзаж, чтобы установить class .portrait поэтому мне пришлось использовать немного Javascript для этой части.

Пример с тегом img но без background-image

Это решение сохраняет тег img так что мы не теряем возможность перетаскивать или щелкаем правой кнопкой мыши, чтобы сохранить изображение, но без background-image просто центрируем и обрезаем 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%); } 

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

 object-fit: cover; 

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

Может быть интересным в 2014 году и далее: P

HTML

 

JS

 angular.module('croppy', []) .directive('croppedImage', function () { return { restrict: "E", replace: true, template: "
", 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 + "')"); } } });

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

Попробуй это:

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

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

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

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

Единственное, что вам нужно, это добавить class «вертикальный» к вертикальным изображениям, вы можете сделать это с помощью этого кода:

 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.

  • Маржа на дочернем элементе перемещает родительский элемент
  • Как переключить таблицу стилей CSS с помощью jQuery?
  • Почему не маржинальная: auto и margin-bottom: авто работают так же, как их левые и правые копии?
  • Зачем использовать селектор атрибутов для соответствия classам?
  • LESS CSS: злоупотребление & Operator при вложенности?
  • В CSS Flexbox, почему нет свойств «justify-items» и «justify-self»?
  • Внедрить слайд-шоу / карусель только для CSS с помощью следующих и предыдущих кнопок?
  • CSS-селектор на основе текста элемента?
  • Укажите несколько селекторов атрибутов в CSS
  • Добавить глиффит Bootstrap в поле ввода
  • Как создать HTML-сообщение об ошибках проверки формы HTML с помощью CSS?
  • Давайте будем гением компьютера.