가변 이미지
이미지 요소도 브라우저 화면의 크기에 따라서 변경 될 수 있습니다. 이미지 요소에도 em, rem, vw , %, px 등을 모두 적용할 수 있습니다.
브라우저에서는 이미지의 width 만 지정해주면 원본 이미지의 비율에 맞게 height 를 자동으로 결정해서 화면에 보여주게 됩니다.
이미지가 브라우저 화면의 크기에 따라서 너무 커지거나 작아지게 되면 이미지의 해상도 퀄리티에 문제가 생길 수 있습니다.
이때 우리는 max-width 속성을 사용하면 브라우저 화면의 크기에 따라서 이미지 크기가 변하다가 지정한 값에 도달하면 이미지 크기의 증가를 멈추도록 할 수 있습니다.
이미지를 다룰때 이미지가 부모 요소보다 커서 브라우저 화면에 이상하게 보일때가 있습니다.
이때 max-width: 100% 로 지정하면 어떤 상황에도 이미지의 width 가 부모 요소의 width 보다 클 수 없도록 지정 할 수 있습니다.
예를 들어
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<style>
img {
width : 100%;
max-width : 500px;
}
</style>
</head>
<body>
<img src="./hello.jpg" />
</body>
</html>
위와 같이 이미지의 크기를 100% 로 지정하면 이미지가 바디의 width 의 100% 를 차지하게 되고 결과적으로 브라우저 화면의 크기가 작든 크든 항상 브라우저 화면의 width 를 모두 차지하게 됩니다.
여기서 추가적으로 max-width 를 500px 로 지정하면 브라우저 화면의 크기가 커지면서 이미지의 크기도 계속 브라우저 화면의 width 를 모두 차지하고 있다가 이미지의 width 의 크기가 500px 에 도달하면 더이상 커지지 않고 브라우저 화면의 크기가 더 증가해도 이미지의 width 가 500px 로 고정됩니다. 또 다시 브라우저 화면의 크기가 감소할 때 이미지의 width 의 크기가 500px 보다 작아진다면 다시 브라우저 화면의 전체 width 를 차지하게 됩니다.
브라우저의 화면 크기를 줄여서 이미지의 width 가 500px 보다 작을 때
항상 브라우저 화면의 width 를 이미지가 모두 차지하고 있는 것을 확인 할 수 있습니다.
브라우저의 화면 크기를 늘려서 이미지의 width 가 500px 도달 하였을 때
더이상 이미지의 크기가 증가하지 않는것을 확인 할 수 있습니다.
