Question

我的背景图片盒子上的响应有问题。我希望我的盒子有背景图片的高度，因为我的背景尺寸是自动的。

HTML：

<div class="index_boxs" id="discover_wines_index"></div>

的CSS：

#discover_wines_index {
    background-image: url(/bulk/bg/wines_inactive.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
}

Answer 1

首先创建保存图片的IMG元素...您可以通过编程或静态方式进行（可以在必要时隐藏它）：

<img id="imageid" src="/bulk/bg/wines_inactive.jpg" style="display:none;" />

现在找出图片的大小：

var img = document.getElementById('imageid'); 
var width = img.clientWidth;
var height = img.clientHeight;

现在调整大小你可以根据这个调整你的DIV元素。使用jQuery调整大小的示例：

$('#discover_wines_index').width(width).height(height);

Answer 2

因为它是一个空div，除非你设置一个高度，否则高度将始终为零。您可以使用一些方法来解决这个问题，过去我使用Uncle Dave’s Ol’ Padded Box技巧取得了成功。

它与上面的相似，但是使用 background-size：cover 并根据父元素的宽度添加百分比填充。

网站上的示例代码：

#meowmeow {
    background: url(http://placekitten.com/720/405/) no-repeat center center;
    background-size: cover;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 */
  }

获得背景图片的全高

2 个答案: