홈피만들기/홈피제작/홈피꾸미기/무료홈페이지만들기/개인홈페이지제작/홈페이지만드는방법/무료개인홈페이지/html 홈페이지/html 이미지 태그/img 태그 속성/img크기조절/

11-3. 이미지의 크기 조절

㈐ 이미지의 크기조절

<img> 태그에 이 옵션을 사용하면 

물리적으로 이미지의 사이즈를 원하는 

대로 지정할 수 있는데, 픽셀수나 

비율(%)로 지정한다. 이 옵션을 지정해 

주면 웹 브라우저에 데이터를 

좀더 빨리 읽어 올 수 있다. 

이미지를 읽어오는 동안에 문자를 먼저 

읽어들여 텍스트 정보를 먼저 보여주고 

그동안 이미지를 로드하여 보여준다. 

그러나 반대로 본래의 이미지 사이즈와 다른 

크기로 지정하면 브라우저에서 확대· 

축소 계산을 하는 동안 시간이 걸리게 된다. 

(형식) <img src="이미지 파일명" 

width="가로 사이즈" height="세로 사이즈">



width="n"
이미지의 폭이 지정한 n 픽셀로 지정된다.

width="n%"
이미지의 폭이 지정한 n%비율로 확대 또는 
축소된다.

height="n"
이미지의 높이가 지정한 n 픽셀로 지정된다.

height="n%"
이미지의 높이가 지정한 n% 비율로 확대 또는 
축소된다.


(실습)

<html>

<head> <title>이미지의 크기조절</title> 

</head>

<body>
 
<img src="osiris.jpg">원래의 사이즈입니다.<p>
 
<img src="osiris.jpg" width="100" height="100">

가로, 세로 100픽셀로 확대하였습니다.<p>
 
<img src="osiris.jpg" width="30" height="30">

가로, 세로 30픽셀로 축소하였습니다.

</body>

</html>