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

这符合要求吗？

.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 3

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

如果需要更多帮助，最欢迎：）

使用CSS调整下面的背景图像和内容的大小

5 个答案: