1

さまざまなフォーム ファクターを持つ携帯電話とタブレットに対応する Web サイトがあります。ホームページに必要な背景画像があり、使用可能な領域に合わせてその画像を引き延ばしたい (場合によっては歪ませる) 必要があります。

これを行う最善の方法は何ですか？

画像を歪めずに、さまざまなフォーム ファクター (タブレット/電話など) に合理的に対応できる優れた代替手段はありますか?

===============================

アップデート

このコードを活用しました。

.transparent-background {
    background: transparent;
}

.background-image {
  background: url(app-background.jpg);
  background-repeat:none;
  background-position:center center;
  background-attachment:scroll;
  background-size:100% 100%;    
}

透明な背景をクラスとして Page および Content 要素に追加し、次に background-image クラスをページ要素に追加しました。これでうまくいくようです。

4

3 に答える 3

0

CSS3プロパティbackground-size：cover;を試しましたか。

http://www.css3.info/preview/background-size/

coverキーワードを使用すると、背景画像が拡大縮小され、画像の元の比率/アスペクト比が維持されます。今回は、背景のポジショニング領域が背景画像で完全に覆われるように、できるだけ大きくします。画像の幅または高さの両方が、背景のポジショニング領域以上です。このように、背景画像の比率が背景ポジショニング領域の比率と一致するかどうかによっても、背景画像の一部が背景ポジショニング領域内に表示されない場合がある。

すべてのブラウザと互換性があるわけではありませんが、デバイスには問題ないはずです-互換性

于 2012-09-28T16:43:49.840 に答える
0

CSSを変更/修正するだけでこれを行うことができると思います。

img {
  max-width: 100%;
}

理解を深めるために、この記事をさらに読んでみてください。

http://www.alistapart.com/articles/fluid-images/

于 2012-09-28T16:49:52.913 に答える
0

2 番目の質問に答えるには、@media ルールを使用して、さまざまな画面サイズ/デバイスにさまざまなスタイルを指定できます。例えば：

@media all and (min-width: 750px) {

/*Any styles in here will only be applied to browsers(screens, etc) with a width > 750px */

}

したがって、現在のスタイルをオーバーライドすることで、画面サイズに基づいて異なる背景画像/レイアウトを使用できます。つまり、大画面用の div やアイコンなどの背景として、より高解像度の画像を設定することができます。それが理にかなっているなら。

于 2012-09-28T16:50:46.440 に答える