2

ブラウザー ウィンドウの幅に基づいて、ヘッダーのスケーラブルな背景画像を設定しようとしています (今のところ)。現在、私が持っているものでは、幅がうまくスケーリングされます。ただし、ヘッダー自体は高さを変更せず、テキスト行の高さに固執します。テキストがない場合は、まったく表示されません。ウィンドウのサイズを大きくすると、ヘッダー イメージの下部が表示されなくなります。min-height をさまざまな値に設定しようとしましたが、必要なことを実行していません。

画像に基づいてヘッダーの高さをスケーリングしたい。ウィンドウが小さい場合、テキスト行の高さまで縮小されます。大きい場合は、テキスト行よりも大きくなります。出来ますか？私はそれがうまく機能する他のサイトを見てきました。それを行う方法の説明を見つけました... WordPress の特定のテーマで。

HTML:

<header>
        <p>
            Line 1<br>
            Line 2<br>
            Line 3<br>
            Line 4<br>
            Line 5<br>
        </p>
</header>

CSS:

header {
    background-image:url('./waybackIMG_1496.jpg');
    background-size : cover;
    background-repeat : no-repeat;
}
header p {
    line-height     : 1.2em;
    text-align      : right;
}
4

2 に答える 2

2

個人的には height:0 padding-bottom: %; を使用します。応答性の高い高さ。あなたが求めているのは、このようなものだと思います。

header {
    background-image:url('./waybackIMG_1496.jpg');
    background-size : cover;
    background-repeat : no-repeat;
height: 0;
padding-bottom: 40%;
}

firebug を使用して、画像の高さに合わせてパディングの下部を調整します。padding-bottom が自然なサイズを超えるとbackground-size: cover;、画像がビューポートよりも広くなり始めます。

次に、メディア クエリを使用して、bg 画像の幅に達したときのヘッダーの絶対サイズを設定します。

@media (max-width: 900px) {
header {
padding:0;
height: 350px;
}
}
于 2015-02-24T17:25:02.630 に答える
0

背景画像の高さがわかっていると仮定します。

header {
  /* background styles */
  padding-bottom: 20%;
  position: relative;
}

header p {
  position: absolute;
  width: 100%;
}

コンテナのbottom-paddingは、実際にはその幅 (高さではない) のパーセンテージになるため、比率を使用して、スケーリング イメージに常に十分なスペースをコンテナに与えることができます。

比率は (100 * imageHeight / imageWidth)% として計算できます。

于 2015-02-24T17:26:50.073 に答える