4

単純なコンセプトです。ブラウザー ウィンドウ内で幅と高さの比率が 1:1 で拡大縮小されるレスポンシブ CSS 背景画像が必要です。これは簡単な部分です。

body{
    height:100%;
}

.banner{
    height:100%;
    background: url('path/to/img') center center no-repeat;
    background-size:contain;
}

<body>
    <div class="banner"></div>
</body>

問題は、テキストを背景コンテナ内にワードラップで配置し、ブラウザウィンドウのサイズが変更されると、背景画像の高さをテキストの高さに合わせたいということです。

<body>
    <div class="banner">
        <p>
            Lorem ipsum dolor sit amet, in eos idque epicuri...
        </p>
    </div>
</body>

これは純粋な CSS/HTML で可能ですか?

4

4 に答える 4

19

背景画像

バックグラウンドを行う1つの方法は、この投稿background-size: coverに従って使用することです:

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

文章

テキストを作成するには、@mediaクエリを使用して調べることができますが、答えを選択したので、残りは皆さんに任せます:)

于 2013-11-02T20:06:07.333 に答える
4

これを試して：

HTML:

<div class="banner">
    <img src="https://www.google.es/images/srpr/logo11w.png" />
    <div class="content">
        Content
    </div>
</div>

CSS:

.banner {
    position: relative;
}
.banner > img{
    width: 100%;
    height: auto;
}
.banner > .content{
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: auto;
}

デモ

于 2013-11-02T19:54:17.587 に答える
1

回答に基づいて、関心のある人は誰でも、テキストの折り返しに比例して CSS 背景画像を拡大縮小するために、次の方法でほとんどの状況で機能するはずです。

フィドルを見る

まず、背景画像がモバイルの解像度よりも大きくレンダリングされないようにするために、ビューポートを追加しました

@media screen and (max-width: 800px){
    .viewport {
        position:absolute;
        right:0;
        left:0;
        top:0;
        bottom:0;
        overflow-x:hidden;
        overflow-y:scroll;
    }
}

<html>
<body>
    <div class="viewport">
        <!-- background image -->
    </div>
</body>
<html>

次に、背景要素background-size:cover;の高さが のプロパティを使用して、モバイル デバイスでテキストを折り返してフローできるようにしました。auto背景要素の高さをテキストの折り返しに合わせてサイズ変更できるようにするには、その親 (この場合はbody) の高さを にする必要があり100%ます。

html,body{
    height:100%;
}

.banner{
    background: url('path/to/banner.jpg') center center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (max-width: 800px){
    .viewport {
        position:absolute;
        right:0;
        left:0;
        top:0;
        bottom:0;
        overflow-x:hidden;
        overflow-y:scroll;
    }

    .banner{
        height:auto;
    }

    .banner .banner-container {
        position:relative;
        overflow:hidden;
    }
}

<html>
<body>
    <div class="viewport">
        <div class="banner">
            <div class="banner-container">
                <h1>Lorem ipsum dolor sit amet, est intellegebat definitionem at</h1>
                <h1>Lorem ipsum dolor sit amet, est intellegebat definitionem at</h1>
                <h1>Lorem ipsum dolor sit amet, est intellegebat definitionem at</h1>
            </div>
        </div>
    </div>
</body>
<html>
于 2013-11-02T21:41:49.433 に答える
0

http://www.positioniseeverything.net/easyclearing.htmlで役立つと思い ます。私はそれをクリアすることで私の問題を解決しました。

于 2013-11-02T19:58:01.980 に答える