이미지 비율

이미지 반응형으로 전체너비 주고 높이값 특정비율 유지하고 싶을 때 css

.image_ratio {
  &.image {
    position: relative;
    width: 100%;
    &::after {
      padding-bottom: 100%; // 1:1 비율
      display: block;
      content: "";
    }
  }
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
  }
}

::after padding으로 높이값 계산
ex)
2:1 50%
3:4 133.33%
4:3 75%