[CSS]CSS로 원하는 모양으로 이미지 자르기

CSS를 하다보면 원하는 모양대로 사진을 자르고 싶어집니다. 단순히 width 또는 height를 조정하면 사진이 찌그러들기만 하지 원하는것 처럼 뚝 잘리지가 않습니다. 그래서 오늘은 원하는 모양대로 사진 자르기를 해보려고 합니다.

 

1. 사진 가져오기

/* 사용할 이미지 불러오기 */

<div class="cropping">
	<img src="BGimg.jpg">
</div>

 

2.  width 줄이기

먼저 가로를 반으로 뚝 잘라보겠습니다.

지금 2000 x 1332 이니 width를 1000으로 만들어 보겠습니다.

.cropping{
  max-width: 1000px;
  overflow: hidden;
}

.cropping img{
	max-width: initial;
}

3. 원하는 방향으로 줄이기

그런데 끝이 그냥 잘라나가서 미관상 별로 인 것 같습니다.

가로가 1000인 것 까지는 좋은데 조금 가운데로 맞춰 보는 것이 좋을 것 같으니 오른쪽으로 움직여 보겠습니다.

margin 속성을 쓸 것이고 단위는 편한 것을 사용하시면 될 것 같습니다.

.cropping{
  max-width: 1000px;
  overflow: hidden;
}

.cropping img{
  max-width: initial;
  margin-left: 50%;
}

 

4. height 줄이기

/* 높이를 줄일 때는 width와 다르게 negative margin-left를 negative margin-top 으로 바꿔야 합니다 */

.cropping{
  max-height: 800px;
  overflow: hidden;
}

.cropping img{
  max-height: initial;
  margin-top: -15%;
}

이쁘다~ 이거 그대로 CJ_FW에 써야겠당

 

margin으로 조절할 수 있다는 생각을 왜 여태 못했을까요 ㅠㅠ

오늘 하루 종일 test.html과 test.css를 굴려가며 얻어낸 값진 소득이네요~

넘나 기쁜것~