使用CSS調整背景圖片和內容的大小

Question

對於響應圖片，我使用CSS屬性background-image和background-size。這允許圖像在瀏覽器窗口調整大小時自動調整大小。問題是，圖片下方的內容並未調整大小。例如，在此設置了我上面的一段文字圖片：

<div class="container"> 
    <div class="image></div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut ligula lacinia, eleifend risus nec, adipiscing magna. Integer egestas fermentum lectus, ac bibendum diam faucibus eu.<p> 
</div> 

對於CSS我：

.container { 
    width: 50%; 
} 

.image { 
    background-image: url('image.jpg'); 
    background-repeat: no-repeat; 
    background-size: 100%; 
    height: 350px; 
} 

當瀏覽器進行調節，圖像也被調整，但由於圖片（350px）有一個設定的高度，在圖片和段落下方會形成一個縫隙。是否有一些我可以做的CSS更改，允許段落在圖片大小調整後直接保留在圖片下方？

下面是一個例子的jsfiddle http://jsfiddle.net/qKGt9/

Answer 1

，如果你希望文本圍繞它流動你不應該使用的圖像作爲背景。自適應設計技術通常將採用這一招IMG元素：

/* Responsive image CSS */ 
img { 
    width: 100%; 
    height: auto; 
} 

我叉你的工作示例小提琴： http://jsfiddle.net/WDFBR/

它需要你的HTML結構和CSS一些細微的變化。最主要的是，我使用的是IMG元素而不是DIV來顯示圖像。看看Twitter Bootstrap等流行框架下的產品，您將學到很多關於良好響應式設計的知識。

Answer 2

<div class="container"> 
<div class="image> 
<img src="image path" /> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut ligula lacinia, eleifend risus nec, adipiscing magna. Integer egestas fermentum lectus, ac bibendum diam faucibus eu.<p> 
</div> 

</div> 

試試這個..

Answer 3

這是否符合要求？

.image { 
    background: url('http://c.tadst.com/gfx/600x400/int-mountain-day.jpg?1') no-repeat; 
    background-size: 100%; 
    padding-top: 66.667%; /* holds 3:2 aspect ratio */ 
} 

Fiddle

Answer 4

放入HTML代碼的實際圖像，並設置img元件的通用寬度來填充其父容器的100％的寬度：

HTML：

<div class="image"> 
    <img src="http://c.tadst.com/gfx/600x400/int-mountain-day.jpg?1"> 
</div> 

CSS：

img { 
    width: 100%; 
} 

小提琴：

http://jsfiddle.net/philsinatra/qKGt9/3/

Answer 5

這是你的100％的解決方案：

按照下面的網址，我剛剛回答了同樣的問題。

Responsive CSS background image - how to make content follow

如果需要更多的幫助，最歡迎:)