將響應式背景圖片設置為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作為contains？ 在這個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>

Answer 2

執行->將float：left添加到帶有背景圖片的第一個div中。
Reason->以％為單位的高度是相對的，在您的代碼中它們與任何其他div都沒有相對性，例如0 = 0的100％。

PS如果您想將第一個div放置在上方而不是背景，則將img標簽放在空的div中。但是再次需要在px中提到高度。嘗試第一種方法。