[CSS] 이미지 종횡비 유지하기

⭐️ 이미지 태그일 때

.parent {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: calc(861 / 1280 * 100%);
}

img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

height를 0을 주었기 때문에 박스 모델 높이에 영향을 주는 건 padding-top 뿐이다.

padding-top 계산식 =>  calc( 이미지 높이 / 이미지 폭 * 100%) 로 계산한다

 

이미 계산된 비율

aspect ratio  | padding-top value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

⭐️ background  이미지 일 때

 

 

🍎 참고하기

https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css

Maintain the aspect ratio of a div with CSS

https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

How To - Aspect Ratio / Height Equal to Width

https://velog.io/@yijaee/%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9%EC%97%90%EC%84%9C-%EC%9A%94%EC%86%8C-%EB%A6%AC%EC%82%AC%EC%9D%B4%EC%A7%95%ED%95%98%EA%B8%B0

반응형 웹에서 요소 리사이징하기

http://rwdb.kr/ratio_calc/

반응형웹, CSS만으로 background-image 의 종횡비 유지하기

https://nuhends.tistory.com/1

[CSS] 이미지 적용 및 crop 방법 A to Z