根据其背景图像高度响应调整div

Question

因此，此处<main>元素的背景大小为contain，这导致它的容器#main包含较小屏幕尺寸的底部空间。

所以，我想根据#main的背景图像高度响应<main>的高度，以消除较小屏幕尺寸的垂直间隙。

请注意，背景图片不应拉伸或隐藏。

HTML

<div id="main">
    <main>

    </main>
</div>

CSS

#main{
    width: 100%;
    height: 70%;
}
main{
    max-width: 100%;
    height: 100%;
    background: url(images/img-main.png) no-repeat top center;
    background-size: contain;
}

的JavaScript

var toHeight = $('main')//?????? I'm stacked here 
$('#main').css('height',toHeight);

有什么想法吗？

---

以下是 jsfiddle demo （调整窗口大小以便了解）

+--------------------------+--------
|                          |
|    background-image      |
|              height      |       main
|                          |
|                          |      height
+--------------------------+
|         vertical         |
|           gap            |
+--------------------------+---------

应转换为：

+--------------------------+--------
|                          |       main
|    background-image      |
|              height      |     height
|                          |
|                          | 
+--------------------------+----------

Answer 1

更新答案

测试旧答案

在测试期间，我发现了旧方法（动态创建图像元素以获得其尺寸）{3}} Chrome，Safari和Firefox，但不是IE。因此，它不是跨浏览器方法。

OP真正想要什么

此外，根据OP的评论，我发现OP希望<main>元素为浏览器高度的70%。但一旦 <main>元素的 width 通过水平调整窗口大小来到达背景图片的 edge ，高度 <main>元素应缩小以消除背景图像之间的垂直间隙。

（因为使用背景图像的contain值来保持图像在框内并保持纵横比而发生垂直间隙。

考虑到这一点，以及我们未能通过大量网络浏览器动态获取背景图像的尺寸，您最终会得到以下结果：

var main = $('#main'),
    imgwidth  = 500,  // Set the width/height of the background image manually
    imgHeight = 300,
    imgRatio  = imgHeight/imgwidth,
    mainHeight   = main.height();

$(window).resize(function() {
  var mainWidth  = main.width(),
      mainRatio  = mainHeight/mainWidth;

  // Compare ratio of the <main> element and the background image
  if (mainRatio >= imgRatio) {
    main.height(imgRatio * mainWidth);
  } else {
    main.height('70%');
  }
}).resize(); // Trigger the handler once the script is loaded

<强> only works on latest versions

---

旧答案 ^{（误解之下）}

没有纯CSS方法可以根据背景图像调整元素的尺寸。

您需要使用JavaScript来实现这一目标。通过使用JavaScript，我们得到计算出的background-image并动态创建一个图像元素（使用背景图像）来获取背景图像的尺寸

你走了：

<div class="wrap">
    <main id="main"></main>
    <div>another div</div>
</div>

_{我合并了两个#main和<main>元素来压缩此特定实例中的标记。}

jQuery版本：

var
    main = $('#main'),
    imgSrc = main.css('background-image').slice(4, -1);

$('<img />')
    .attr('src', imgSrc)
    .on('load', function() {
        main.height(this.height);
    });

<强> WORKING DEMO

Answer 2

您只需使用<img>代码而不是background-image属性即可完成此操作：

HTML

<div class="wrap">
    <div id="main">
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRqHMio3jll2W62WXJHbufc-xxYPxec_ip8Ez0lQv2P7Umy2kPKrw">
    </div>
    <div>another div</div>
</div>

CSS

#main{
    width: 100%;
    height: auto;
    border: 1px solid red;
    text-align: center;
}

img{
    max-width: 100%;
    vertical-align: middle; //prevents a default bottom margin from appearing
}

小提琴：http://jsfiddle.net/wAJyv/6/（尝试调整大小）

编辑：或者，如果您希望图片向上扩展，但主div更宽，您只需使用width: 100%代替max-width: 100%：{{ 3}}

Answer 3

在background-size: 100% 100%;的css中提供.main而不是包含。

.main {
    background-size: 100% 100%;
}