モバイルデバイスのレスポンシブデザインでイメージを適切なサイズにするにはどうすればよいですか？

Question

私はいくつかのモバイルウェブサイトで作業しています。私は彼らが標準的なディスプレイデバイス320×480であり、x 960 640は、だから私は640×960ディスプレイに見栄えのする画像を作成した網膜ディスプレイデバイスに良い見てみたいと私は、画像サイズに対応したCSSを使用しています。私は進歩しており、サイトのヘッダー部分は非常に近くにあります：view mobile page

唯一の問題は、右側に1〜2ピクセルのデッドスペースがあることです。注：これは、モバイルデバイス上では、リサイズされたWebブラウザよりもはっきりしています。ここで

はhtmlです：ここでは

<ul id="header"> 
    <li id="full-site-link"><a href="index.html"><img src="/images-mobile/btn_head-full.png" alt="btn_head-full" /></a></li> 
    <li id="mobile-logo"><a href="/"><img src="/images-mobile/btn_head-logo.png" alt="btn_head-logo" /></a></li> 
    <li id="mobile-search"><a href="/mobile/search"><img src="/images-mobile/btn_head-search.png" alt="btn_head-search" /></a></li> 
</ul> 

は、CSSです：

#wrapper   { max-width: 480px; } 

ul#header   { width: 100%; margin:0; padding:0; } 
ul#header li  { display: inline; margin: 0; padding: 0; } 
ul#header li a  { float:left; margin-bottom: -3px; padding:0; } 

ul#header li#full-site-link a { width: 21.71875%; } /* 139/640 */ 
ul#header li#mobile-logo a  { width: 56.5625%; } /* 362/640 */ 
ul#header li#mobile-search a { width: 21.71875%; } /* 139/640 */ 

ul#header li a img  { max-width:100%; margin: 0; padding: 0; border: none; } 

私はちょうど検索の右側にある厄介なラインを取り除くことができる場合、私は良いになります形状。

ありがとうございます！

Answer 1

あなたは私の意見では、このことについて間違った道を進みました。あなたのボタン画像およびロゴは透明でなければならないと背景のグラデーションは、ブラウザのサポートのためにあなたの要件に応じて、CSSまたは別1pxの× 139pxの画像を介して適用されなければなりません。

これはまだ画面は（携帯用ゲームコンソールのような）奇妙な解像度を持っていた場合でも動作しますピクセル幅によって制約されない、あなたはより多くの流体レイアウトを作成することができます。