반응형 웹(7) - 가변 이미지

이미지 요소에도 상대 단위 em, vw, % 등을 얼마든지 사용할 수 있다. 이때 주의할 점은 브라우저가 대개 이미지의 비율을 유지한다는 점, 그리고 이미지가 무작정 커지는 것을 경계해야 한다는 점입니다.

 

 

max-width

CSS의 max-width 속성은 너비의 최대값을 지정하여 요소의 너비가 크 이상 커지지 않게 한다.

img{
	max-width: 200px;
}


/* 부모 요소의 크기에 따라 변하지만 부모 요소의 크기보다는 커질 수 없다. */
img{
	max-width: 100%;
}

 

 

 

picture

HTML의 picture 요소를 이용하면 뷰포트의 너비 등 브라우저의 특정 조건에 따라 이미지를 반응형으로 불러 올 수 있다.

<picture>
	<source scrset="desktop.png" media="(min-width: 1200px)">
    <source scrset="tablet.png" media="(min-width: 800px)">
    <img scr="mobile.png">
</picture>

 

 

정리