반응형 웹사이트를 만들 때 이미지 표현을 어떻게 하면 상위 요소 밖으로 삐져나오지 않는지 알아보자.
유동 이미지
유동 이미지를 표시할 때는 이미지 width, height 모두 다 작성해도 괜찮다.
다만 반드시 이미지에 max-width와 height는 꼭 넣어줘야한다.
기본 예시
img {
max-width: 100%;
height: auto;
}
사용된 코드 설명
max-width: 100%;
:
이미지 사이즈가 상위요소보다 작으면 그대로 표현. 이미지 사이즈가 상위 요소보다 크면 상위요소 100% 까지만 표현.
height: auto;
:
이미지의 높이를 비율에 맞게 표현.
참고
MDN Web Docs - 이미지, 미디어 및 양식 요소nts
MDN Web Docs - 반응형 이미지
관련 포스트
반응형 디자인
grid 란?
flex 란?
유동 이미지 - 현재글
미디어 쿼리
미디어 쿼리 – 다크 모드
공부 목적 블로그