CSS ディメンション

CSS size

cssのsize(次元)属性には以下の要素が含まれます

height 要素の高さを設定します。

width 要素の幅を設定します。

max-height 要素の最大高さを設定します。

max-width 要素の最大幅を設定します。

min-height 要素の最小の高さを設定します。

min-width 要素の最小幅を設定します。

line-height 行の高さを設定します。

max/min-height/width は要素の最大と最小の高さを設定します。

line-height は行の高さを設定します。これは、最初の行の上部から 2 行目の上部までの高さを指します。

要素の高さを設定します

<!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>

学び続ける

新しいファイル

<!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>

提出するリセットコード

自動運転