響應CSS背景圖像

簡單的概念，我想有可以擴展在1一個響應CSS背景圖像：在瀏覽器窗口內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可能嗎？

來源

2013-11-02 dcd0181

我「米不能確定你的意思是什麼‘流高度智慧與文本’......你想要的文字縮放呢？ –

是啊，所以我想文本流（套）以及背景圖片我認爲我需要使用媒體查詢，但是如何確定文本開始包裝的分辨率？ – dcd0181

下面是一個很好的示例：http：// spring。io/ – dcd0181

背景圖像做背景

的方法之一是使用每個background-size: cover爲this post：

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查詢，BU T作爲你選擇的答案，我會留下，其餘高達你們:)

來源

2013-11-02 20:06:07

試試這個：

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; 
}

Demo

來源

2013-11-02 19:54:17 Oriol

我可以迭代這個，謝謝！ – dcd0181

我認爲它可以幫助你http://www.positioniseverything.net/easyclearing.html。我解決我的問題像它通過清除。

來源

2013-11-02 19:58:01

基於關閉的答案，任何人誰是有興趣的，按比例與文字環繞縮放CSS背景圖片，下面的應在大多數情況下工作。

參見fiddle

首先，以確保所述背景圖像不呈現比移動分辨率越大，我添加了一個視口

@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-02 21:41:49 dcd0181

響應CSS背景圖像

回答

相關問題