0

Web サイトのヘッダー画像をどのように設定すればよいでしょうか。基本的な問題 - 私がラップトップを使用しているとしましょう - 幅の解像度は約 1280px です。幅が 2000px のヘッダー画像があります。

私が達成したいのは、ラップトップではこのヘッダー画像が 1280px にサイズ変更され、LCD モニター (±1900px のような幅の解像度) では 1900px の iamge が表示されるということです。画面。

私の現在の CSS 設定はwidth: 100%;-> これにより、ラップトップで 2000px 幅の画像がトリミングされ、画像の 2/3 だけが表示されます。

画像を常に表示に合わせて設定する方法はありますか?

4

3 に答える 3

1

次の css を探しています。

.headerimage{
    background-image: url(...);
    background-size: contain;
}

これにより、コンテナのサイズに対応するように背景画像のサイズが変更されます。

于 2012-12-31T00:07:07.430 に答える
0

メディア クエリを適用できます。

ブラウザ ウィンドウの幅が 1280px 未満

@media (max-width: 1280px) {
   #myHeader {
      width: 50% // resize it to 50% when the browser screen is **LESS** than 1280px
   }
}

ブラウザ ウィンドウの幅が 1280px より大きく 2000px より小さい:

@media (min-width: 1280px) and (max-width: 2000px) {
   #myHeader {
      width: 75% // resize image at 75% when the browser screen is **BETWEEN** 1280px and 2000px    
   }
}

ブラウザ ウィンドウの幅が 2000px より大きい:

@media (min-width: 2000px) {
  #myHeader {
      width: 100% // resize header to 100% when screen is **LARGER** than 2000px
  }
}

そして、必要に応じてブレークポイントと幅をカスタマイズします。

于 2012-12-31T00:08:31.443 に答える
0

はい、javascript を使用して可能です:

<script>
// first set viewport width and viewport height to vpw and vph
var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],vpw=w.innerWidth||e.clientWidth||g.clientWidth,vph=w.innerHeight||e.clientHeight||g.clientHeight;

d.getElementById( "your_image_id" ).style.width( vpw+"px" );
</script>
于 2012-12-31T00:08:58.727 に答える