[아주 대충 HTML] 이미지 크기 자동 조정

[아주 대충 HTML] 이미지 크기 자동 조정

0. 문제점 발견   1. 이미지 크기 조정 기본    2. 세로 길이 자동조정     3. 가로, 세로 길이 자동조정    4. 요점

보통 이미지 크기 조정은 <img src=그림주소 width=숫자, height=숫자> 이런식으로 숫자를 직접 넣어 조정합니다. 그러나 가로세로 길이를 정확히 알 수 없는 경우, 비율 계산하기 귀찮은 경우 자동으로 하는 코드가 있으면 편하겠죠. 

또한 아주 큰 그림은 오른쪽이 잘려서 안 보이거나 아래 스크롤바를 좌우로 움직여 봐야 하니 좀 불편하기도 합니다. 그래서 좌우 크기를 줄이면서 또 세로 비율도 맞게 하는 코드가 필요한데 다음과 같습니다.

<img src="그림주소" style="max-width: 100%; height: auto;"> 

아래에서 좀 길게 설명해 보겠습니다.

0. 문제점 발견

https://twitter.com/sinbi2010/status/378474558690316288 
https://pbs.twimg.com/media/BUCcmv0CAAAZQkN.jpg:large

이 사진을 퍼다가 그대로 올려 봅니다. 
(크롬 : 마우스우클릭-이미지복사, 익스플로러 : 마우스우클릭-복사) 

뭔가 이상합니다. 우측 잘렸습니다. 아무래도 크기 조정을 해야겠습니다. 
글쓰기에서 HTML을 선택하면

<img src="https://pbs.twimg.com/media/BUCcmv0CAAAZQkN.jpg:large">

이런게 보일 겁니다. 크기가 없죠. 



1. 이미지 크기 조정 기본

보통 html에서 크기는  

width=(가로크기)px, height=(세로크기)px

 이런 게 삽입되어 있습니다. 해볼까요?
* px 생략해도 되긴 하더군요.

<img src="https://pbs.twimg.com/media/BUCcmv0CAAAZQkN.jpg:large"

width=400px, height=300px

 > 

많이 작아졌죠. 크기도 문제고 이게 가로세로 비율이 맞는지도 알수 없습니다.  

2. 세로 길이 자동조정

가로 길이에 맞춰 같은 비율로 세로길이를 자동 조정해 보렵니다. 제 블로그에서는 좌우가 한 620px 정도 되는데 연습삼아 width=600으로 하고 가로에 맞춰 세로를 자동으로 조정해보겠습니다.

style="width: 600px; height:auto;" 이걸 삽입해 보렵니다. 

<img src="https://pbs.twimg.com/media/BUCcmv0CAAAZQkN.jpg:large" 

style="width: 600px; height:auto;"

> 

얼추 근사하게 보입니다. 

3. 가로, 세로 길이 자동조정

이제는 블로그 좌우 크기가 얼마인지 모르거나 알아내기도 귀찮으니 그냥 가로는 width=100% 해 놓고 세로는 가로 길이에 따라 자동으로 조정하게 만드려고 합니다.

style="max-width: 100%; height: auto;"

<img src="https://pbs.twimg.com/media/BUCcmv0CAAAZQkN.jpg:large" style="max-width: 100%; height: auto;"> 

근사하죠.
물론 max-를 빼고 그냥 width: 100%를 해도 결과는 같습니다.
<img src="https://pbs.twimg.com/media/BUCcmv0CAAAZQkN.jpg:large" style="width: 100%; height: auto;">  

style="max-width: 100%; height: auto;" 여기서 100%대신 50%를 넣으면 가로 길이가 절반으로 줄겠죠. 세로는 물론 같은 비율로 줄겠구요.

4. 요점

html 이미지 태그 안에 
세로크기 자동조정 : <img src="그림주소" style="width: 700px; height: auto;"> 
가로세로 자동조정 : <img src="그림주소" style="width: 100%; height: auto;">
가로세로 자동조정 : <img src="그림주소" style="max-width: 100%; height: auto;"> 
이런 식으로 삽입하시면 그림이 잘리거나 좌우 스크롤바를 움직이지 않고도 한눈에 볼 수 있습니다.