画像の拡大と縮小

HTMLを使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<p>img src="../img/smp.gif" width="150" height="150" alt="サンプル画像"></p>
<p>img src="../img/smp.gif" width="50" height="50" alt="サンプル画像"></p>
<p>img src="../img/smp.gif" width="120" height="120" alt="サンプル画像"></p>
<p>img src="../img/smp.gif" width="300" height="50" alt="サンプル画像"></p>
</body>
</html>

表示サンプル

サンプル画像

解説

「IMG」タグ内に「width」と「height」を使用して指定をします。見てもらっての通りピクセル指定または元の画像に対する倍率にて画像の幅と高さを決めることが出来ます。最後の例のように、縦横の比率を変えることも出来ます。

ＣＳＳを使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
img.samp1 { width: 100px; height: 100px; }
img.samp2 { width: 200px; height: 100px; }
img.samp3 { width: 100%; height: 50%; }
-->
</style>
</head>
<body>
<p><img src="../img/smp.gif" class="samp1" alt="サンプル画像"></p>
<p><img src="../img/smp.gif" class="samp2" alt="サンプル画像"></p>
<p><img src="../img/smp.gif" class="samp3" alt="サンプル画像"></p>
</body>
</html>

表示サンプル

サンプル画像

解説

HTMLでの記述に似ていますね。「width」「height」にて幅と高さを指定できます。数値もしくは親ボックスに対する割合にて指定できます。