[CSS] 반응형에서 이미지 종횡 비율 맞추기

생소했던 내용이라 강의를 두 번 듣고, 여러번 머릿속으로 복기한 다음 글로도 정리해본다.

 

👀 반응형에서 이미지 종횡 비율 맞추기 (1:1 비율 이미지 만들기)

1. % 와 px의 개념은 다르다.

2. width의 100%는 명확하지만, height의 100%는 부모에 명확한 px값이 없다면 명확하지 않아진다.

3. 반응형 제작 시 width는 100%를 주면 디바이스에 따라 px 사이즈가 변화하지만, 세로는 안된다.

4. padding 과 margin 의 % 기준은 width 를 따른다.

5. 따라서 반응형에서 정사각형 이미지를 만들기 위해 padding을 사용한다.

.img-parent {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  
  img {
  display: block;
  width: 100%;
  height: 100%;
  }
}

 

6. 이렇게 하면 img의 높이는 부모의 height가 0 이기 때문에 0 이 되어버린다.

7. 그래서 position: absolute; 를 사용해준다. 왜인지는 잘 모른다. 그냥 css가 그렇다면 그런거다.

8. 그리고 맨날 까먹는 속성.. object-fit을 사용해 이미지 소스의 비율이 망가지지 않게 배치해준다. 

 

.img-parent {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  
  img {
  position: absolute;  
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  }
}

 

그래서 1:1 비율의 이미지 소스가 아니더라도 정사각형 box에 맞게 예쁘게 배치 완료!