使用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

如果需要更多的帮助，最欢迎:)