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

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

반응형 사이트에서 1:1 비율의 이미지를 만들어보자. 포인트는 padding값을 활용한다는 것이다.

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

1. 이렇게 하면 img의 높이는 부모의 height가 0 이기 때문에 0 이 되어버린다.
2. 그래서 position: absolute; 를 사용해준다.
   이미지를 문서의 흐름에서 제외시켜 이미지의 높이값이 문서의 영향을 받지 않도록 하기 위함이다.
3. 그리고 맨날 까먹는 속성.. 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 비율로 만들었다.