[CSS] 반응형 이미지, 비디오 (or 가변 이미지, 비디오)

이미지의 경우 웹 문서에 삽입할 때부터 이미지의 크기가 정해져 있기 때문에 브라우저 창의 크기가 변화한다 하더라도 이미지킈 크기 값은 바뀌지 않는다.

그래서 브라우저 화면의 크기가 줄어들면 이미지의 일부가 가려지는 현상이 발생한다.

이러한 문제점을 해결하기 위해서 CSS를 이용하거나 <img> 태그의 srcset 속성을 이용하여 문제를 해결할 수 있다.

그 외에도  <picture> 태그와 <source> 태그를 사용할 수 도 있다.

CSS를 이용한 방법

이미지를 변경되는 레이아웃에 맞게 표시하려면 이미지를 감싸고 있는 부모 요소 만큼 커지거나 작아지도록 하면되는데 이때 { max-width: 100%; height: auto; } 를 속성값으로 지정해 주면 된다.

max-width 가 아닌 width 속성을 사용해도 된다.

<img> 태그의 srcset 속성을 이용하는 방법

<img> 태그의 srcset 속성은 가각의 다른 환경에서 사용될 이미지 소스를 명시한다.

css의 { max-width: 100%; height: auto; } 속성을 이용하더라도 모든 상황에서 사용할 수 있는것은 아니다.

고해상도의 이미지의 경우 크기가 줄더라도 파일의 용량은 크기 때문에 모바일에서 다운로드하는데 시간이 오래 걸릴 수 있다. 

또한 텍스트가 포함된 이미지일 경우 모바일 화면에 맞게 줄여 표시하면 텍스트가 너무 작아져 내용을 알아보기 힘들어진다.

이때 <img> 태그의 srcset 속성을 이용하면 화면 너비 값이나 픽셀 밀도에 따라 이미지 파일을 지정할 수 있다.

<img srcset="img1-320w.png 320w,

img2-480w.png 480w,

img3-800w.png 800w"

sizes="(max-width: 320px) 280px,

(max-width: 480px) 440px,

800px"

src="img3-800w.png" alt="이미지3">

이미지 고유 픽셀 너비는 px이 아니라 w 단위를 사용한다.