1

このガンビーのサンプルサイト : http://tiltingpoint.com/#/

ブラウザの幅と高さを変更すると、上部の赤い画像を制御できます。

articleタグの「フルスクリーン」でやられていると思います。

<article id="panel-1" 
         class="panel" 
         full-screen="" 
         style="background-image:url("http://tiltingpoint.com/images/backgrounds/bg_panel_1.jpg");>

ブラウザの高さを変更すると、このソースに高さスタイルが追加されました。私はそれを理解しました。

しかし、それがどのように機能するのか理解できず、具体的な説明が見つかりません。

ブラウザの幅と高さの変更に合わせて画像キープアスペクトを変更する方法を教えてください。

4

2 に答える 2

1

その便利さ、これを試してください： 

@media screen and (max-width: 1700px) {

    {
          background: url(newImage.jpg) no-repeat center center fixed; 
    }

}

これはIE9でも動作します

/* background setup */
.background {
    background-repeat:no-repeat;
    /* custom background-position */
    background-position:50% 50%;
    /* ie8- graceful degradation */
    background-position:50% 50%9 !important;
}
于 2014-05-25T13:17:18.900 に答える
0

私が言える唯一のことは、これをあなたのcssに追加してみてください. これにより、イメージがコンテナまたは親要素のフル サイズに拡大されます。

panel-1 {
   width: 100%;
   height: 100%;
}

それがうまくいかない場合は、同じことを行うことができます

panel-1 {
  max-height: 100%;
  max-width: 100%;

これらは、親要素のサイズに基づいて機能します。BG 画像として使用する場合は、小さい親要素に制限されないように、html 要素または body 要素に挿入してみます。

于 2014-05-25T13:02:27.140 に答える