이때 주의할 점은 브라우저가 대개 이미지의 비율을 유지한다는 점 . 그리고 이미지가 무작정 커지는 것을 경계해야 한다는 점.
이미지가 원본보다 커지면 이미지 품질이 떨어질 수 있음.
CSS의 max-width 속성 은 너비의 최대값을 지정하여 요소의 너비가 그 이상 커지지 않게 함.
- 형식 : max-width:200px; - 가로(너비)의 값이 200px을 넘을 수 없음.
- 형식 : max-width:100%; - 부모 요소보다 이미지가 커질 수 없음.
CSS의 max-height 속성 은 높이의 최대값을 지정하여 요소의 너비가 그 이상 커지지 않게 함.
- 형식 : max-width:200px; - 높이의 값이 200px을 넘을 수 없음.
아래 이미지는 브라우저 비율을 유지하면서 확대됨.
아래 이미지의 최대 크기는 300픽셀
아래 이미지의 박스는 뷰포트의 50%, 그 안의 이미지는 100%, 그러나 이미지 최대 크기는 500픽셀
picture 태그를 이용하면 뷰포트의 너비 등 브라우저의 특정 조건에 따라 이미지를 반응형으로 불러 올 수 있음.
- 기본 이미지는 sabara2.png
- 800픽셀을 기준으로 이미지 변경 - cybort.png
- 1200픽셀을 기준으로 이미지 변경 - robot.png
