1

对于响应式图像，我使用 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/

4

5 回答 5

2

如果您希望文本在其周围流动，则不应使用图像作为背景。响应式设计技术通常会在IMG元素上使用这个技巧：

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

我已经为你的小提琴分叉了一个工作示例：http: //jsfiddle.net/WDFBR/

它需要对您的 HTML 结构和 CSS 进行一些细微的更改。最主要的是我使用IMG元素而不是 aDIV来显示您的图像。看看Twitter Bootstrap等流行框架下的商品，你会学到很多关于良好响应式设计的知识。

于 2013-07-22T18:04:22.427 回答
1

这符合要求吗？

.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 */
}

小提琴

于 2013-07-22T18:01:12.297 回答
0 
<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>

试试这个..

于 2013-07-22T17:54:40.243 回答
0

将实际图像放入 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/

于 2013-07-22T18:05:17.237 回答
0

这是您的 100% 解决方案：

按照下面的网址，我最近刚刚回答了同样的问题。

响应式 CSS 背景图像 - 如何使内容跟随

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

于 2014-09-04T07:47:25.287 回答