임의의 이미지가 주어지면 이미지 중앙에서 정사각형을 자르고 주어진 정사각형 내에 표시하려고합니다.

이 질문은 다음과 유사합니다. CSS 이미지 크기 조정 및 자른 이미지 표시 하지만 이미지의 크기를 모르므로 설정된 여백을 사용할 수 없습니다.

한 가지 해결책은 자른 치수에 맞게 크기가 지정된 요소 내에 중심이있는 배경 이미지를 사용하는 것입니다.

기본 예

.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태그를 유지 하므로 이미지를 저장하기 위해 드래그하거나 마우스 오른쪽 버튼을 클릭하는 기능을 잃지 않습니다. 불투명도 트릭 으로 Parker Bennett 에게 감사의 뜻을 전합니다.

.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 이미지 사양 define 명령 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" />

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를 사용해야했습니다.

이것을 시도하십시오 : 이미지 자르기 치수를 설정하고 CSS 에서이 선을 사용하십시오 :

object-fit: cover;

img태그가 있지만없는 예제background-image

이 솔루션은 img태그를 유지 하므로 이미지를 저장하기 위해 드래그하거나 마우스 오른쪽 버튼을 클릭하는 기능을 잃지 않고 background-imageCSS로 중앙 및 자르기 작업을 수행 할 수 있습니다.

매우 높은 이미지를 제외하고 종횡비를 양호하게 유지하십시오. (링크 확인)

(실제로보기)

마크 업

<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%);
}

@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 + "')");
          }
      }
  });

바이올린 링크

이 시도:

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

있다는 사실을 숙지 width하고 height당신의 DOM 요소 (블록은 같은 요소를 표시 레이아웃이있는 경우에만 작동합니다 div또는 img). 그렇지 않은 경우 (예를 들어 범위) display: block;CSS 규칙에 추가하십시오 . CSS 파일에 액세스 할 수 없으면 요소에 스타일을 인라인으로 놓으십시오.

이미지를 중앙에 자르는 또 다른 방법이 있습니다.

.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"는 img 태그에서 가능한 너비, 높이 속성을 재정의하는 데 사용됩니다.