CSS로 유동적인 컨테이너 너비에 기반한 이미지 비율 유지

다양한 비율 만들기

padding-top 의 값을 아래와 같이 변화시켜 다양한 비율을 얻을 수 있다.

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

어제와 같이 react의 기본 개념과 조금의 css 공부를 했다.
실전 프로젝트에 반응형을 적용할려고하는데 주어진 이미지가

페이지의 크기에 따라 그 크기가 줄어드는것이 보이는 이미지가
유지되며서 줄어들은것이 아니고 일부가 안보이게 됬다.

예전에 css 공부를 하다가 그부분을 본거 같아
찾고 또 찾아 padding-top을 주면 비율에 맞게 이미지가 유지
되는것을 알게됬다.😁

아무튼 딴짓 하지말고 코딩에만 집중하자
어제 보다 더 좋은 내가 되자

남들과 비교하지말고 어제의 나와 비교해 성장해가자