意味 - レスポンシブなCSSの背景イメージ-コンテンツの作成方法




web design template (2)

私はヘッダーdivにCSSの背景イメージを持っています。 画像の応答性はうまくいきますが、ヘッダー画像の下のコンテンツがサイズ変更されたときにその画像に「追従」するように動作させることはできません。

問題は、ヘッダーイメージのdivに高さの値を指定するとdivの高さが固定されることです。 そして、私が高さのイメージを与えないときは全く表示されていません。

JSFIDDLE参照してください。

どのように修正するための助け?


ここにあなたの解決策があります:

問題: -任意の位置レイヤーで使用されていない限り、高さのパーセンテージ値は機能しません。

解決策: -高さの代わりに。 "padding-bottom"または "padding-top"の値を使用して、高さを高めます。 Becasueのパーセンテージ値は、「パディング」でうまく機能します。

計算は、背景画像の関連する高さの関連する高さ値を取得するのが非常に簡単です。

例: -背景画像の寸法が(1200幅)×(450高さ)ピクセルの場合。 画像に応答する「高さ」の値は、「37.5%」

式: - Y(x)100(÷)X.(450×100÷1200)= 37.5%

ソリューションURL: - http://sandeepparashar.com//responsive-css-background-image-height.html

コード:-

.custom-header-option {
    padding-bottom:37.5%; /* This will make height responsive */
    background-image: url('http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}

より多くのヘルプが必要な場合は、ほとんどの歓迎:)


私はあなたがしようとしていることは、 "空白"のギャップを削除することだと思いますか?

このコードを試してください: http : //jsfiddle.net/0bjgfo16/4/

HTML

    <img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg" />

    <div class="content-wrap">
        <p>here is content</p>
    </div>

CSS

    * { box-sizing: border-box; padding: 0; margin: 0; }
    img { max-width: 100%; float: left; }

    .content-wrap {
        width: 100%;
        height: 200px;
        background-color: grey;
        color: #fff;
        float: left;
    }




responsive-design