0

セットアップ：このウェブサイトには、画面サイズに応じて適切にサイズを変更する必要があるトップヘッダー画像があります。これは私が使用しているコードです：

HTML：

<img class="header-background" src="<?php echo get_template_directory_uri() . '/images/header.png';?>" alt="Header" />

CSS：

.header-background {
left: 0;
margin: auto;
right: 0;
position: absolute;
z-index: 91;
width: 100%;
margin-top: -35px;
}

問題：画像サイズは1900x227ピクセルであり、各ユーザーの解像度に応じて適切にサイズ変更する必要があります。

これはそれがどのように見えるべきかです。青いトップは、すべての解像度で同じままである必要があります。

画像をCSSの背景/図形に置き換える方が簡単でしょうか？

ここに画像の説明を入力してください

4

2 に答える 2

1

のような静的な高さを追加できますheight:200px。

（それが私のコンピューターで最もよく機能することを私が見つけたものです）。

于 2012-09-25T19:07:27.277 に答える
0

ここで行う最善のことは、最小/最大の高さとリレーショナル値も含むメディアクエリを使用することだと思います。

元。：

@media all and(max-width: 980px) and (max-height: 980px){
    .headerImage{
        width:8em;
        height:90%;
    }
}

メディアクエリの詳細：http：//css-tricks.com/css-media-queries/

ピクセル値をemsに変換するための便利なツール：http：//pxtoem.com/

于 2012-09-25T19:31:25.787 に答える