2

ヘッダー画像をブラウザのサイズに合わせて拡大縮小したいと思います。これは、att の現在のコードです。画面をグラブしますが、これは小さな画面では画像を拡大縮小しません。背景画像オプションを使用してみましたが、これは私が望む外観を実現しません。

  .header-image {    
    position:absolute;
    top:0;
    bottom:0;   
    max-height:1000px;
    overflow:hidden;    
      left: 0; 
      right: 0;
    z-index:-1;         
      border:10px solid #545351;        
}

.header {
    width: 100%;
    padding-top:50px;
    margin-top:-10px;       
}

& HTML

<div align="center"><!-- big image -->
        <div class="header-image"><img src="images/liveryHeader3.jpg"></div><!-- end of big image-->
</div><!-- end of center image class-->

現在のサイトからスクリーン グラブ

クライアントに表示される例

2 番目の画像は、小さいモニターに表示されるおおよそのものです。画像は拡大縮小されておらず、レイアウトが奇妙に見えます。完全な画像が表示されるように、馬の頭を拡大縮小したいと思います。小さいモニターではなく、Android とタブレットで動作するようです。

4

6 に答える 6

1

このように id を div に入力します (1 つの div のみを使用)

HTML:

<div id="header"> </div>

CSS:

#header{
  background-image:url(../images/liveryHeader3.jpg);
  background-size: 100% 100%;
}

OBS: background-size に、最初の値は幅、2 番目の値は高さです

詳細については、 http ://www.w3schools.com/default.asp をご覧ください。

于 2014-11-28T04:37:26.277 に答える
1

画像は width:100%; では縮小されません。拡大するだけなので、画像のサイズがどうであれそのままです。「メディアクエリ」を使用してから、別の % を設定する必要があります。

何かのようなもの：

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* put your specific styling here either replacing the background image with something smaller using % or sized down via % */
}
于 2013-10-18T20:47:41.747 に答える
0

あなたが提供したコードは、スクリーンショットに見られるように画像を拡大縮小しないため、最初に実際に引き伸ばされている場所を確認する必要があります

とにかく、max-height:1000px;cssをチェックインしてください - これは制限される可能性があり、もちろんwidth:100%;height:100%;画像と外側のdivにも追加する必要があります

于 2013-10-18T20:46:48.187 に答える
0

実際の画像を背景要素として css に配置し、background-size を含むように設定すると、正確な画面サイズに収まるようになります。

このようなもの：

.header-image {    
    position:absolute;
    top:0;
    bottom:0;   
    max-height:1000px;
    overflow:hidden;    
    left: 0; 
    right: 0;
    z-index:-1;         
    border:10px solid #545351;  
    background: url(*IMAGE URL HERE*) no-repeat;
    background-size: cover;
}

それがどうなるか見てください。

于 2013-10-18T21:07:47.020 に答える