CSS - 이미지 자르기(crop)

Updated 09/21/22

 

crop 은 그림판에서 1초컷이지만, css 로는 <div> 로 <img>영역을 한번더 감싸줘야 한다.

자, 여기 귀여운 고양이가 있다. CSS 로 고양이 얼굴만 잘라보도록 하자.

 

결과화면 미리보기

귀여운 고양이

 

요렇게 얼굴만 잘랐다.

 

HTML

<div className="bg-crop">
   <img className="bg-cat" src={cat} />
</div>

 

CSS

  .bg-crop {
    position: relative;
    width: 100px; // 자를 사이즈를 명시해준다.
    height: 50px;
    overflow: hidden;

    .bg-cat {
      position: absolute; // 포지션을 주고,
      top: 0; 		  // 보이기 원하는 위치를 지정
      left: 0;
      width: 300px; // 오리지널 사이즈
      height: 200px;
    }
  }

**styled-component 기준입니다.