반응형 이미지 비율 유지하기

html

<div class="image-wrapper">
  <img class="image" />
</div>

 

css

.image-wrapper {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.26%;
	overflow: hidden;
}

.image-wrapper .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

 

여기서 . image-wrapper의 padding-bottom의 값을 변경하여 원하는 비율로 맞추면 된다

2:1 : padding-top: 50%
1:2 : padding-top: 200%
4:3 : padding-top: 75%
16:9 : padding-top: 56.25%

 

어디선가 보고 적어놨었는데 출처를 모르겠다 ㅠㅠ