javascriptを使用して画像を縮小する

Question

javascriptを使用してdiv背景画像に保存されていた画像を縮小する必要があります。

JavaScriptで可能ですか？

提案がありますか？

Answer 1

CSSは背景イメージのサイズ変更をサポートしていません。

丸い角を探しているだけであれば、HTML、CSS、Javascriptのさまざまな組み合わせを使用できるさまざまなソリューションがあります。

Google: Rounded Corners

Answer 2

あなたははJSと背景のサイズを変更することはできません。

あなたはははそれらすべてを表示するには4枚のコーナー画像や巣のdivタグの中に画像を分割することができます：もちろん

<div style="background:url(tl.jpg) top left no-repeat"> 
    <div style="background:url(tr.jpg) top right no-repeat"> 
     <div style="background:url(bl.jpg) bottom left no-repeat"> 
      <div style="background:url(br.jpg) bottom right no-repeat"> 
       content 
      </div> 
     </div> 
    </div> 
</div> 

をあなたが唯一つの軸上に成長DIV場合ことを簡素化することができます：

<div style="background:url(top.jpg) top no-repeat"> 
    <div style="background:url(bottom.jpg) bottom no-repeat"> 
     content 
    </div> 
</div> 

Answer 3

CSS 3にはこれを可能にするbackground-sizeプロパティがありますが、ほとんどのブラウザではサポートされていません。

Answer 4

最新のブラウザーのほとんどは、背景画像に頼らずに要素のコーナーを丸めることができます。次のCSSスタイルを確認してください。

-moz-border-radius:4px; 
border-radius:4px; 
-webkit-border-radius:4px; 

これらはそれぞれ4ピクセルの半径を与えます。 Mozillaブラウザの最初のバージョン（Firefoxなど）、2番目のバージョンは新しいcss3ブラウザ、Safariなどの最後のバージョンです。