ホームページ作成 - 画像のサイズを調整する

ホームページ作成ＴＯＰ > 画像 > 画像のサイズを調整する

画像のサイズを調整する

画像のサイズを調整する方法です。

もともとの画像サイズを変更するのではなく、表示上のサイズを変更する事が可能になります。

大きなサイズの画像を小さく表示する場合、画像自体が大きいファイルサイズのままですと、画像自体が送られてくるまで多くの時間が必要になってきます。

この様な場合には、もともとの画像サイズを小さくする様にしましょう。

sample

→ ホームページ作成（画像サイズ調整）

ＨＴＭＬ　width="幅" height="高"

画像の表示サイズを変更する場合には、<img src="" alt="">内にwidth="幅"とheight="高"を指定する事で可能です。

大きさを指定しておく事で、表示スピードが向上する事がありますので画像の大きさを変えずに（１００％の大きさ）で表示する場合もサイズを指定した方が良いです。

書き方は


<img src="画像" width="25" height="25" alt="">→
<img src="画像" width="50" height="50" alt="">

こうなります

ホームページ作成ＴＯＰ > 画像 > 画像のサイズを調整する > このページのＴＯＰ　▲

スタイルシート　width:幅 height:高

画像サイズを指定する場合には、<img src="画像" alt="">で指定した画像に対してwidth="幅" height="高"のスタイルを指定します。

画像サイズを指定する単位は、下記の様になります。

単位	説明
px	ピクセル単位での指定
％	親要素のサイズに対する相対的なサイズになります。下記は↓<div>の中に入れた画像（<img>）のサイズを<div>のサイズに対して５０％に設定した場合になります。

要素に直接書く

書き方は


<img src="画像" alt="" style="height:25px;width:25px;">→
<img src="画像" alt="" style="height:50px;width:50px;">

headに書く

書き方は


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css">
 <!--

        .sample1     { height:25px;width:25px;}
        .sample2     { height:50px;width:50px;}

 -->
 </style>
 </head>
 <body>

        <img src="画像" alt="" class="sample1">→
        <img src="画像" alt="" class="sample2">

 </body>
</html>

こうなります