CSS 크기
CSS 크기(치수) 속성에는 다음과 같은 측면이 포함됩니다.
높이 요소의 높이를 설정합니다.
width 요소의 너비를 설정합니다.
max-height 요소의 최대 높이를 설정합니다.
max-width 요소의 최대 너비를 설정합니다.
min-height 요소의 최소 높이를 설정합니다.
min-width 요소의 최소 너비를 설정합니다.
line-height 줄 높이를 설정합니다.
max/min-height/width는 요소의 최대 및 최소 높이 너비를 설정합니다.
line-height는 첫 번째 줄의 상단을 참조하는 줄 높이를 설정합니다. 두 번째 행 상단의 높이.
요소 높이 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img.normal
{
height:auto;
}
img.big
{
height:120px;
}
p.ex
{
height:100px;
width:100px;
}
</style>
</head>
<body>
<img class="normal" src="http://www.visionunion.com/admin/data/file/img/20140111/20140111004002.jpg" width="95" height="84" /><br>
<img class="big" src="http://www.visionunion.com/admin/data/file/img/20140111/20140111004002.jpg" width="95" height="84" />
<p class="ex">这个段落的高和宽是 100px.</p>
</body>
</html>백분율을 사용하여 이미지 높이 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
</style>
</head>
<body>
<img class="normal" src="http://www.visionunion.com/admin/data/file/img/20140111/20140111004002.jpg" width="95" height="84" /><br>
<img class="big" src="http://www.visionunion.com/admin/data/file/img/20140111/20140111004002.jpg" width="95" height="84" /><br>
<img class="small" src="http://www.visionunion.com/admin/data/file/img/20140111/20140111004002.jpg" width="95" height="84" />
</body>
</html>
다음 섹션