3

画像を分割のサイズに引き伸ばすと、画像の品質が低下しました。Windows 8 Metro HTML5 アプリで品質を維持しながら画像のサイズを変更することは可能ですか? 画像のサイズは 360x480 ピクセルです。

HTML5 コード:

     <div id="imageSection" >
        <input type="image" id="homepageimage" >
    </div>

css ファイルのコード:

    #imageSection { 
     height: 90%;   
       }
 #homepageimage { 
width: 100%;   
background-image: url(../images/kidsphoto.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
height:100%

}

4

2 に答える 2

2

画像の「サイズを縮小」するときに問題があると仮定すると、これは IE10 の補間モードが低品質 (最近傍) しかサポートしないため、サイズ変更された画像は元の画像よりも低品質に見えるためです。

IE7 から IE9では、CSS プロパティ -ms-interpolation-mode を使用できました。

-ms-interpolation-mode: bicubic;

しかし、これは IE10 ではサポートされなくなりました(図を参照)。

残念ながら、簡単な修正はありません。CPU を集中的に使用する回避策がいくつかありますが、可能であれば、実際に必要なサイズで画像を保存することをお勧めします。また、より大きな画像バリエーション (サイズの 180% および 140%) を提供することで、高 DPI システムをサポートしていることを確認してください。

于 2012-10-03T01:29:51.173 に答える
1

画質の低下を防ぐために、表示する解像度が最も高い画像を使用してください。画像が 360x480 で、それよりも高い解像度 (たとえば 720x960) で表示したい場合、品質は低下します。これに対する唯一の解決策は、解像度が 720x960 の画像を使用することです。

于 2012-07-23T15:21:13.380 に答える