画像


画像の拡大・縮小

 画像の拡大・縮小は width, height 属性を使って行うことができます。(参考) transform:scaleも利用できます。

 下の例は、元の画像(左)を半分(右)にしたものです。ここで注意したいのは%を指定すると画面の幅や高さに対する%なので拡大してしまうということです。面倒ですが、ピクセル値などを設定します。画像のサイズは、Windowsなら画像ファイルを右クリックし、プロパティを表示し、詳細タブで確認できます。

プロパティ

<img src="coala.jpg" alt="coala" />
<img src="coala.jpg" alt="coala" style="margin-left:10px; width:169px; height:127px;"/>
coala coala

 

画像の枠

 画像の枠も他のオブジェクト同様に border属性で設定できます。

<img src="coala.jpg" alt="coala" style="border: solid thick yellow;"/>
coala

 画像の枠を上下左右個別に設定すると3D効果を持たせることもできます。

<style>
.imgframe1 {
  border-left: silver solid thick;
  border-right: black solid thick;
  border-top: silver solid thick;
  border-bottom: black solid thick;
}
</style>
<img src="coala.jpg" alt="coala" class="imgframe1" />
coala

 

画像の変形

 画像の変形は他のオブジェクト同様、transform属性で設定できます。詳しくは、transform属性のページをご覧ください。


 

画像の表示/非表示

 画像に限ったことではありませんが、display属性でnoneを設定すると非表示になります。あるいは、visibility属性でhiddenを設定しても画像は表示されません。2つの違いは、画像のある場所までなくなるかどうかです。

 次の例では、非表示の設定なし、display: none、visibility: hidden の違いを分かりやすく表示しています。

<blockquote>設定なし</blockquote>
<div style="border: solid thin black; padding:3px;">
<img src="IE.png" />
</div>
<blockquote>display: none</blockquote>
<div style="border: solid thin black; padding:3px;">
<img src="IE.png" style="display: none;" />
</div><br />
<blockquote>visibility: hidden</blockquote>
<div style="border: solid thin black; padding:3px;">
<img src="IE.png" style="visibility: hidden;" />
</div>
設定なし
display: none

visibility: hidden

display属性の値 (画像表示に関連するもののみ)
説明
inline規定値。インライン要素(spanなど)を表示。
blockブロック要素(pなど)を表示。
list-itemリスト項目(liなど)を表示。
none非表示。オブジェクトの場所もなくなる。
initial初期値(visible)
inherit親からの継承値

visibility属性の値
説明
visible表示
hidden非表示(場所はそのまま残る)
collapseテーブルの要素のみに有効。行と列を取り除く。
initial初期値(visible)
inherit親からの継承値

画像の透過

 画像の透過度はopacity属性で設定します。透過の値は 0.0 - 1.0 で指定します。

opacity: 値
<img src="coala.jpg" style="opacity: 0.5;" />

画像の切り取り

 clip属性を使うと、画像の一部だけを表示できます。パラメータは下のように与えますが、autoはデフォルトで全体を表すので、shapeが重要です。shapeはrect(top, right, bottom, left)関数で与えます。
 画像の位置指定はposition:absoluteで指定するか、JavaScriptで取得してから設定しないとうまくいきません。

clip: auto|shape|initial|inherit;
<img src="coala.jpg" style="clip:rect(0px, 100px, 100px, 0px);" />

 

このページの先頭へ戻る