将响应式背景图像设置为 HTML 中的 div答案

【问题标题】：Setting a responsive background image to a div in HTML将响应式背景图像设置为 HTML 中的 div
【发布时间】：2017-01-16 08:09:28
【问题描述】：

如何使此背景图像可见并具有响应性？（注意：我知道我应该单独使用 CSS，但我使用的内容管理系统不允许我添加单独的 CSS 文件..）

如果这样设置代码，则图像不显示：

<div style="width: 100%; height: 100%; background-image:url('................');
    background-repeat:no-repeat; background-size:cover;">
<div style="float:left; width: 32%; height:100%; display: inline-block;">
</div>
<div style="float:left; width: 32%; height:100%; display: inline-block;">
</div>
<div style="float:left; width: 32%; height:100%; display: inline-block;">
</div>
</div>

像这样，图像显示出来，但没有响应：

<div style="width: 100%; height: 100%; background-image:url('................');
    background-repeat:no-repeat; background-size:cover; height:150px;">
<div style="float:left; width: 32%; height:100%; display: inline-block;">
</div>
<div style="float:left; width: 32%; height:100%; display: inline-block;">
</div>
<div style="float:left; width: 32%; height:100%; display: inline-block;">
</div>
</div>

非常感谢！

【问题讨论】：

如果您使用百分比高度，请确保已定义父高度。
...并清除浮动。

标签： html css image background responsive

【解决方案1】：

Do-> 将 float:left 添加到您的第一个带有背景图像的 div。
Reason-> % 中的高度是相对的，在您的代码中它们是 no与任何其他 div 的相对性。类似于 0 = 0 的 100%。

P.S 如果您希望将第一个 div 放在上方而不是在背景中，然后将 img 标签放在空 div 中。但是在 px 中需要再次提及高度。尝试第一种方法。

【讨论】：

【解决方案2】：

如何使用背景大小作为包含？在这个jsfiddle中它可以工作 https://jsfiddle.net/8fyLbj6r/

<div style="width: 100%; height: 100%; background-image:url('http://images.firstcovers.com/covers/i/its_easy_if_you_try-5332.jpg');
    background-repeat:no-repeat; background-size:contain; height:150px;">

</div>

【讨论】：

谢谢，这行得通。我现在需要重新缩放图像，但至少它是可见的。谢谢！