Question

我在中间制作了一个带有响应式img的标题。我想计算2个div。 1在img之上; img底部的1; 除了小型设备外，计算结果还可以。

首次加载页面时，情况就是这样：http://i.imgur.com/hdJnIId.png 如果我重新加载页面，则会发生以下情况：http://i.imgur.com/pY6GkpN.png

仅在小于440px的屏幕中发生

这是我使用的Jquery：

$(document).ready(function() {
    $(window).resize(function() {
        getWidthAndHeight();
    });
    $(window).load(function() {
        getWidthAndHeight();
    });
});

function getWidthAndHeight (){
    var full    = $('.header-main').outerHeight (),
        hImg    = $('.hd-m-m').height (),
        x       = hImg,
        y       = full - x,
        c1      = y * 0.3,
        c2      = (y * 0.7) + 5,
        ct      = c1 + c2 + x; //used only to confirm the result - console.log

    $('.hd-m-t').css({'height': c1});
    $('.hd-m-b').css({'height': c2});
}

Ps。：我有＆＃39; +5＆＃39;因为我使用了一个margin-top：-5px来覆盖img之后的一个小空白区域。

这是我的HTML

<header id="home" class="full"><!-- home -->
    <div class="header-bg"></div><!-- background images -->

    <div class="header-main">
        <div class="hd-s"></div> <!-- div on left side -->
        <div class="hd-m">
            <div class="hd-m-t"></div> <!-- top div - needs calc -->
            <div class="hd-m-m"> <!-- middle div -->
                <img src="img/home/home-logo.png" />
            </div>
            <div class="hd-m-b"> <!-- bottom div - needs calc -->
                <h2>main text</h2>
                <h2>sub text</h2>
            </div>
        </div>
        <div class="hd-s"></div> <!-- div on right side -->
    </div><!-- transparent logo -->
</header>

这是我正在寻找的最终结果：http://i.imgur.com/vnS3BGb.png 我想这样，因为背景img将具有视差效果，我希望它只显示标识透明度。

任何人都可以帮助我吗？

Answer 1

好的，所以，过了一段时间，我没有找到任何解决这个问题但是这个'修复'。我不知道这是不是最好的方式，但我们走了：

我更改了$（document）.ready部分，所以现在它在所有内容加载后执行该函数（包括img）。这解决了底部的额外余量。

$(document).ready(function() {
    $(window).load(function() {
        getWidthAndHeight();
    });
    $(window).resize(function() {
        getWidthAndHeight();
    });
});

由于底部缺少的背景仅发生在小于440px的屏幕中，因此我在函数中添加了一个if条件，并带有额外的计算结果。 missin背景始终是相同的高度。但是我也把这个函数移到了$（document）.ready这是最终的代码：

$(document).ready(function() {
    $(window).load(function() {
        getWidthAndHeight();
    });
    $(window).resize(function() {
        getWidthAndHeight();
    });

    function getWidthAndHeight (){
        var full    = $('.header-main').outerHeight (),
            hImg    = $('.hd-m-m').height (),
            x   = hImg,
            y   = full - x,
            c1  = y * 0.3,
            c2  = (y * 0.7) + 5,
            c3  = c2 + 17,
            ct  = c1 + c2 + x;

        $('.hd-m-t').css({'height': c1});
        if ($(window).width() < 440) {
            $('.hd-m-b').css({'height': c3});
        } else {
            $('.hd-m-b').css({'height': c2});
        };
    }
});

如果有人知道更好的答案，我会很感激。 = d 谢谢@SableFost你给了我一些很好的建议（甚至学习额外的东西）。

Jquery calc数学在小型设备中无法正常工作

1 个答案: