Question

我遇到的问题似乎应该非常简单。

我有一个具有一定高度的横幅，以及一个设置为横幅宽度的100％的图像。当窗口调整大小时，图像宽度随之增长，但我想在图像高度大于横幅高度时将对齐方式更改为顶部。

例如，当图像高度<1时横幅高度：

.image {
    bottom: 0px;
}

当它是＆gt;横幅高度：

.image {
    bottom: auto;
    top: 0px;
}

看起来很简单，但我觉得我错过了一些非常愚蠢的东西，因为我无法看到让事件触发。

$(window).resize(function () {
    console.log('Image: ' + $('.image').height() + 'px' + ' ' + 'Banner: ' + $('.banner').height() + 'px');
    if ($('.image').height() + 'px' > $('banner').height() + 'px') {
        $('.image').css({
            'bottom': 'auto',
                'top': '0px'
        });
    } else {
        $('.image').css({
            'bottom': '0px'
        });
    }
});

这是我的小提琴：http://jsfiddle.net/Kiaaanabal/r8u9hu9c/2/

非常感谢任何帮助！

谢谢！

编辑：

比我更聪明的人告诉我删除px，因为我在比较字符串。现在的问题是事件触发器，如图像高度始终大于横幅高度，这不是真的（至少对我而言）。

Answer 1

尝试更改

if ($('.image').height() + 'px' > $('banner').height() + 'px')

到

if ($('.image').height() > $('banner').height())

第一个代码片段是比较字符串，第二个是比较数字。

如果声明基于元素的高度不触发

1 个答案: