0

私はすべての画像サイズを288Wx345Hで標準化しています。Retina 576Wx690Hの場合。

私はiphone5アプリにCSS3とJavaScript（Cordova2.1 / Phonegap）を使用しています。

CSS3網膜でこれを試しましたが、機能しません

    background-size: 288px auto;

HTML：

  <div id='slider' class='swipe'>
<ul>
<li style='display:block'><div><img style="vertical-align: bottom" src="images/1a.png" border="0" ></div></li>
<li style='display:block'><div><img style="vertical-align: bottom" src="images/1b.png" border="0" ></div></li>
<li style='display:block'><div><img style="vertical-align: bottom" src="images/1c.png" border="0" ></div></li>
<li style='display:block'><div><img style="vertical-align: bottom" src="images/1d.png" border="0" ></div></li>
<li style='display:block'><div><img style="vertical-align: bottom" src="images/1e.png" border="0" ></div></li>
<!-- <li style='display:none'><div><img style="vertical-align: bottom" alt="" title="" border="0" class="shadow" /></div></li> -->
</ul>

4

1 に答える 1

0

background-size は背景に適用されます。 http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size

ここでは、タグを使用して画像を挿入する<img>ため、background-size では問題が解決されません。

2 つの解決策があります。 まず、DOM を変更し、背景 CSSで画像を追加します。これで問題を解決できます。

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
   only screen and (min--moz-device-pixel-ratio: 1.5),
   only screen and (min-resolution: 240dpi) {
  [class*="pictos-"] {
    background-image: url("1a-big.png");
    -moz-background-size: 288px 345px;
    -o-background-size: 288px 345px;
    -webkit-background-size: 288px 345px;
    background-size: 288px 345px;
  }

}

CSS3 ソリューションの長所: Retina 画像は、Retina と 72dpi 以上のデバイスでのみ読み込まれます。

CSS3 ソリューションの短所: CMS バックエンドがある場合、スケーラブルではありません。アクセシビリティとセマンティックにはあまり適していません。

または、Retina 用に同じ解像度 (288x345) で 150 DPI の画像をエクスポートします。ファイルは大きくなりますが、動作するはずです。

DPI ソリューションの長所: 管理するイメージは 1 つだけで、CMS で簡単に使用できます

DPI ソリューションの短所: ファイルを読み込むにはサイズが大きく、これは 72dpi よりも高いデバイスにのみ影響します

とにかく、この問題に対する JavaScript ソリューションがあります。

幸運を

于 2012-12-18T00:53:15.937 に答える