Div拍高度

這就是問題所在！Div拍高度

<div class="col-sm-4 box-prova" style="background-image: url('URL');"> 
</div>

class-> box-prova沒有高度，我想要它佔用背景圖片的高度。

謝謝

來源

2017-03-05 Antonio Carbone

事實上，案件的工作方式相反。你需要指定的高度，以您的股利和調整你的背景相應

背景會的div高度

.box-prova { 
 
background-image: url('https://www.w3schools.com/css/trolltunga.jpg'); 
 
    background-size:100% 100%; 
 
    height:200px; 
 
    }

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="col-sm-4 box-prova"> 
 
    </div>

來源

2017-03-05 11:31:00 neophyte

好的......但這種解決方案具有響應式設計？如果我分配一個靜態高度!! ??！？！ –

高度在響應式設計中永遠不會成爲問題..如果您需要更改不同屏幕尺寸的高度，您需要使用@ @media queris' – neophyte

如果答案可以幫助您考慮使用upvoting it ..如果它解決了您的問題，請點擊綠色的檢查標記接受它..這就是如何工作..其他人會認爲這個問題仍然是開放的，它會吸引垃圾郵件的答案..同時，如果它不幫助你留下評論，讓人們知道答案是不正確的。歡迎來到SO。 – neophyte

我有一個JavaScript的辦法解決這個問題。嘗試了這一點

<html> 
 
     <body> 
 
      <div class="img" id="img"></div> 
 
      <script> 
 
      var imgUrl="https://www.w3schools.com/css/trolltunga.jpg"; 
 
      var div = document.getElementById("img"); 
 
      var tmp = document.createElement('img'); 
 
      tmp.src = imgUrl; 
 
      tmp.style.display = "none"; 
 
      tmp.onload = function(e){ 
 
       div.style.backgroundImage = "url("+imgUrl+")"; 
 
       div.style.height = tmp.height+"px"; 
 
       div.style.width = tmp.width+"px"; 
 
      } 
 
       
 
      </script> 
 
     </body> 
 
    </html>

來源

2017-03-05 11:59:27 crook

因爲這是不可能的，你描述的方式，你應該使用圖像而不是作爲一個背景圖像，但在<img>標籤：

<div class="col-sm-4 box-prova"> 
    <img src="URL" width="200" height="150" /> 
</div>

...，其中<img>標記內的width和height屬性定義了圖像的原始大小。

來源

2017-03-05 12:05:29 Johannes

回答

相關問題