jquery - 根据其背景图像高度响应地调整 div 的大小

标签 jquery html css responsive-design background-image

<分区>

所以，这里的背景大小为 <main>元素是 contain ，这导致它的容器 #main在较小的屏幕尺寸上包含朝向底部的空间。

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

请注意，背景图像不应被拉伸(stretch)或隐藏。

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

最佳答案

更新的答案

测试旧答案

在测试过程中，我发现旧方法(动态创建图像元素以获得其尺寸)only works on latest versions Chrome、Safari 和 Firefox 但不是 IE。因此它不是跨浏览器方法。

OP真正想要的是什么

此外，根据下面 OP 的评论，我发现 OP 想要 <main>元素 70%浏览器的高度。但是一次 <main> 的宽度元素通过水平调整窗口大小到达背景图像的边缘，高度 <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

WORKING DEMO .

旧答案^(误会)

没有纯 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 .

关于jquery - 根据其背景图像高度响应地调整 div 的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22344308/