javascript - 获取背景图片的全高

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

因为它是一个空的 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 */
  }