0

Web サイトのヘッダー画像を作成したいと考えています。

いつも真ん中に立っているイメージでお願いします。誰かのブラウザが縮小したら、センターの画像が立った。これがどのように行われても、このサイトにはそこにしか到達できないという例があります。

http://aarkcollective.com/

4

3 に答える 3

2

@Leeishは正しい考えを持っています。

別の方法は、次の css を使用することです

.center_element {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;   /* half of the height of the header */
    margin-left: -150px; /* half of the width of the header*/
}

HTML の場合:

<img class="center_element" src="images/header_image.jpg" width="300" height="100">
于 2013-02-24T20:32:51.907 に答える
1 
div{
    margin: 0 auto;
    width: [whatever]%;
}

image / divの幅またはパーセントが固定されている限り、拡大縮小されます。これは、左右の余白が中央に配置されたままになりますauto.。これはおそらく重複する質問なので、別の回答を探す必要があります。

編集

私はあなたのコメントに基づいて私の答えを編集しています。私はこのフィドルを作って、私が話していたことを実行しました。http://jsfiddle.net/P8eDT/2つ入れdivsました。画像のあるものとないものがあります。内側のdivは柔軟な幅、設定された高さで、中央に配置されます。2番目の画像の内側の画像は、常にの幅と一致するという点で「レスポンシブ」divです。私が知る限り、これはあなたが投稿したサンプルサイトで彼らが行っていることとまったく同じです。以下に掲載されているのは、INNER div（画像であるもの）のコードです。

#inner {
    width: 50%;
    height: 100px;
    margin: 0 auto;
    background-image: url(/path/to/image.jpg);
    background-size: cover;
    background-position: center;
}

をサポートしていない古いバージョンのIEには、JavaScriptフォールバックが必要になることに注意してくださいbackground-size:cover。私は以前にこれを行ったことがあり、JavaScriptを使用して幅/高さを測定し、どちらか長い方を設定しました。

于 2013-02-24T19:46:08.217 に答える
0

あなたはposition:fixedあなたのcssで使用することができ
ますあなたのヘッダーはあなたのcss.headerで800x50のクラスと幅と高さを持っていると言います
：

.header{position:fixed; top:50%; left:50%; margin:-25px 0 0 -400px;}

垂直方向の中央に配置したくない場合は編集Leeishする方が良い解決策です

于 2013-02-24T19:45:54.290 に答える