반응형에 맞게 이미지를 맞추기 위해 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% |
'웹 > CSS' 카테고리의 다른 글
[코딩공부_112] 내가 작성한 코드가 왜 적용되지 않을까? (0) | 2022.01.03 |
---|---|
[코딩 공부_107] css animation 예제(스크랩) (0) | 2021.08.06 |
[코딩 공부_106] css diner로 선택자 공부하기 (0) | 2021.07.20 |
[코딩 공부_101] 반응형 웹 Media Query가 적용이 안되요! (0) | 2021.06.30 |
[코딩 공부_92] 마우스 커서 이미지 변경하기 (0) | 2021.06.09 |
댓글