|
{width:値;}で画像の横幅を指定することが出来ます。
■ 画像の横幅を指定する
下の画像の通常サイズは28×34ピクセルです。下の画像は
高さはheight:auto;（デフォルト）と指定しているので横幅に対して高さも自動で調整されます。
左から2番目の画像の横幅は
28×4=112pxで通常の横幅の4倍の値です。
したがって高さも34×4=136pxと4倍の高さで表示されHTML指定の
<img src="./image/biru.gif" width="112" height="136" alt="ビル">
と同じ横幅、高さになります。
【ブラウザ表示】
ソース
<img src="./image/biru.gif" alt="ビル1">
<img src="./image/biru.gif" class="w1" alt="ビル2">
<img src="./image/biru.gif" class="w2" alt="ビル3">
<img src="./image/biru.gif" class="w3" alt="ビル4">
外部ファイル
img.w1{width:112px; height:auto;}
img.w2{width:160px; height:auto;}
img.w3{width:10%; height:auto;}
<body>～</body>に直接記入する場合
<img src="./image/biru.gif" alt="ビル1">
<img src="./image/biru.gif" style="width:112px; height:auto;" alt="ビル2">
<img src="./image/biru.gif" style="width:160px; height:auto;" alt="ビル3">
<img src="./image/biru.gif" style="width:10%; height:auto;" alt="ビル4">
■ 画像の高さを指定する
{height:値;}で画像の高さを指定することが出来ます。
下の画像は
横幅は{width:auto;}（デフォルト）と指定しているので高さに対して横幅も自動で調整されます。
【ブラウザ表示】
ソース
<img src="./image/biru.gif" alt="ビル1">
<img src="./image/biru.gif" class="he1" alt="ビル5">
<img src="./image/biru.gif" class="he2" alt="ビル6">
<img src="./image/biru.gif" class="he3" alt="ビル7">
外部ファイル
img.he1{width:auto; height:80px;}
img.he2{width:auto; height:110px;}
img.he3{width:auto; height:130px;}
<body>～</body>に直接記入する場合
<img src="./image/biru.gif" alt="ビル1">
<img src="./image/biru.gif" style="width:auto; height:80px;" alt="ビル5">
<img src="./image/biru.gif" style="width:auto; height:110px;" alt="ビル6">
<img src="./image/biru.gif" style="width:auto; height:130px;" alt="ビル7">
■ その他の項目
・
画像に枠線を入れる
・
画像の周りに余白を入れる
・
画像の横に文字を回り込ませる
・
画像に並ぶ文字の位置を指定する
・
画像を切り抜く
・
画像のマスクを指定する
スタイルシート一覧のページに戻る
|
