[코딩공부_113] 반응형에서 이미지 비율 유지하기

반응형에 맞게 이미지를 맞추기 위해 width를 숫자로 계속 지정하고 계시진 않으신가요?? 번거롭지 않게 비율을 그대로 유지하고 반응형이 적용될 수 있게 css 코드를 작업하면 됩니다 :) 엄청 쉽고 간단하니 꼭 봐주세요!!

---

이미지 그대로의 비율 유지하기

<div class="img_div">
	<img class="img_tag">
</div>

.img_div {
	width: 100%;
}
.img_tag {
	max-width: 100%; height: auto;
}

 

가로 세로 비율 유지하기

<div class="img_div">
	<img class="img_tag">
</div>

.img_div {
	position: relative;
    width: 100%;
    height: 0; 
    padding-bottom: 56.26%;
    overflow: hidden;
}
.img_tag {
	position: absolute; 
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}

구분	padding-bottom (.img_div)
2:1	50%
1:2	200%
4:3	70%
16:9	56.25%