html - 将响应式背景图像设置为 HTML 中的 div

Question

如何使此背景图像可见并响应？ (注意:我知道我应该单独使用 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>

非常感谢!

Answer 1

使用 background-size 作为 contain 怎么样？在这个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>