Question

这就是问题！

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

类 - ＆GT; box-prova避风港的高度，我希望它需要背景图像的高度。

感谢

Answer 1

实际上案件的工作方式相反。您需要为div指定高度并相应地调整背景

后台占用div的高度

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我有针对此问题的JavaScript解决方法。试试这个

＆＃13;

    <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>

＆＃13;

Answer 3

由于您无法按照描述方式进行操作，因此您应该将图片用作背景图片，而不是<img>标签：

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

...，width标记内的height和<img>属性定义图像的原始大小。

Div取图像高度

3 个答案: