이미지 리사이징 쉽게 쉽게

css 에서 간단히 이미지 리사이즈를 제공하긴 합니다. :) auto 기능입니다. auto는 여기저기서 많이 보셨겠지만..

이렇게 쓸수가 있네요. 간단합니다.

img { width: 200px; height: auto; }

이건데요. 너비를 200px 로 만들고 height은 그 비율에 맞추어서 보여주어라 라는 뜻입니다. 만약 저 문구 그대로를 css 파일에 넣으신다면 모든 이미지들의 너비는 200으로 바뀌게 됩니다.

특정 div 에 쓰는 그림에만 효과를 주고 싶다면 <div class="width200"> 이렇게 이름을 정한후 css 에서 .width200 img { width: 200px; height: auto; } 이것을 넣어주면 됩니다.

직접 html 안에 쓰고 싶다면 로 정해주면 되겠네요. style="width: 100px;height:auto;" 부분이 들어갔네요.

실제로 적용한 이미지 입니다. sunset

원본이미지 sunset

width만 100으로 정해진 그림도 가능하긴 하네요 sunset