반응형 웹사이트를 제작시 화면 리사이즈 될때 이미지 비율 유지하는 방법 팁!

퍼블작업에 익숙하지 않은 프론트엔드 개발자 혹은 이제 막 웹 개발에 발을 들인 초보 개발자분들에게
반응형 웹사이트 제작시 이미지가 비율대로 줄어들게 하는 방법이 헷갈릴 수 있다고 생각합니다.
그래서 제가 퍼블리셔로서 일했을때 이미지 비율을 유지하는 코드에 대한 내용을 공유하려고 합니다.

반응형이미지비율

예시 코드

마크업 예시





 <ul>


 <li>


  <div>


   <img src="이미지소스코드" alt="이미지설명" />


  </div>


 </li>


 </ul>

스타일 예시


li {
  position: relative;
  padding-bottom: (세로/가로 * 100) %
}
li div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

li div img {
  width: 100%;
  height: auto;
}

li에 padding bottom 수치로 인해 비율이 유지 된다.

Scroll to Top