이미지를 자동으로 잘라내고 가운데로 맞추는 방법

이미지를 자동으로 잘라내고 가운데로 맞추는 방법

임의의 이미지가 있는 경우 이미지 중앙에서 정사각형을 잘라내어 주어진 정사각형 안에 표시합니다.

이 질문은 이것과 유사합니다: CSS Display an Image Resize and Cropped, 하지만 이미지의 크기를 모르기 때문에 설정된 여백을 사용할 수 없습니다.

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

---

기본예제

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

<div class="center-cropped" 
     style="background-image: url('https://via.placeholder.com/200');">
</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('https://via.placeholder.com/200');">
  <img src="https://via.placeholder.com/200" />
</div>

---

object-fit/-position

지원되는 브라우저를 참조합니다.

CSS3 Images 규격은 다음을 정의합니다.object-fit그리고.object-position속성들은 함께 a의 이미지 내용의 스케일과 위치에 대한 더 큰 제어를 허용합니다.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="https://via.placeholder.com/200" />

저는 순수 CSS 솔루션을 찾고 있었습니다.img태그(배경 이미지 방식이 아님).

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수업이 있어서 이 부분은 자바스크립트를 조금 써야했습니다.

시도해 보기:이미지 크롭 치수를 설정하고 CSS에서 다음 줄을 사용합니다.

object-fit: cover;

예:img태그는 있지만 없음background-image

이 솔루션은 다음을 유지합니다.img태그를 지정하여 이미지를 드래그하거나 마우스 오른쪽 단추로 클릭하여 저장하는 기능을 잃지 않도록 합니다.background-imageCSS를 중심으로 자르기만 하면 됩니다.

매우 높은 영상을 제외하고는 종횡비를 미세하게 유지합니다.(링크 확인)

(View in Action)

마크업

<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그리고.heightDOM 요소에 레이아웃(예: 블록 표시 요소)이 있는 경우에만 작동합니다.div혹은img(예를 들어, span)이 아니면 추가합니다.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 태그에서 가능한 너비, 높이 속성을 재정의하는 데 사용됩니다.

인스타그램 탐색이나 그리드 같은 것은 IMG 태그에 이것을 사용합니다.

aspect-ratio: 1 / 1; //or whatever
object-fit: cover;

부모는 그리드를 표시해야 합니다.

이미지 주변에 두 개의 플렉스 박스를 사용하여 크기를 조정하고 크룹을 조정하는 등의 최상의 기능을 제공합니다.전체화면 이미지에 사용하기 적합 (이미지 회전목마에 사용합니다)가로:100vw, 높이:100vh 컨테이너는 magic css입니다.

HTML:

<div class="container">
   <div class="slide">
   <img src="https://someimageurl.jpg" 
   alt="image" class="image">
   </div>
</div>

CSS:

  .container {
  display: flex;
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  justify-items: center;
  justify-content: center;
  }
 
 .slide {
 display: flex;
 width: 100%;
 height: 100%;
 max-width: 1600px;
 max-height: 1000px;
 justify-items: center;
 justify-content: center;
 margin: auto;
 padding: 0;
 overflow: hidden;
 }
 
 .image {
 display: block;
 min-width: 100%;
 min-height: 100%;
 object-fit: cover; /* Cover the image */
 object-position: center;
 margin: auto;
 padding: 0;
 }

언급URL : https://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image