padding을 이용한 이미지비율 유지

padding을 이용해서 이미지 비율 유지하기

padding-top, 또는 padding-bottom을 이용하여 할 수 있다.
img태그에 부모태그가 있어야함,

1. 부모 태그에 padding-top, 또는 padding-bottom에 원하는 비율을 넣는다.
2. position: relative; 를 이용해 기준을 잡고 padding-top(비율)에 벗어나는 부분은 overflow: hidden;를 이용해 안보이게한다.

• 비율은 가로/세로 x 100

3. 자식요소(이미지)에 position: absolute; 적용하여 부모로부터 기준을 잡고 원하는 비율에 맞춰 잘라낼 수 있다.

.img-area {
  width: 100%;
  padding-top: 62.68%;
  overflow: hidden;
  position: relative;
}

.img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}