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

回答

相关问题