相应右侧div的图像高度计算

时间:2015-09-29 17:40:26

标签: javascript jquery html

我有html结构

<div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="papers left text-center">
                    <img src="http://wowthemes.net/demo/leroy/img/dummies/18.jpg" class="imgs" alt=""><br />
                </div>
            </div>
            <div class="col-md-6">
                <div class="papers right text-center">
                    <h4 class="notopmarg nobotmarg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h4>
                </div>
            </div>
        </div>
</div>

并在DOM

中生成以下输出

Image output

我尝试在左侧div .papers.right后,根据height .papers.left元素设置正确image,即div的高度jquery使用以下height技术加载,正如您在图片中所注意到的那样,$('.imgs').each(function () { $(this).on('load', function () { var height = $(this).closest('.papers.left').height(); $(this).closest('.row').find('.papers.right').css({ 'min-height': height }, { 'max-height': height }).height(height); }) }) 在右侧没有得到相同的设置。

$(document).ready()

但不幸的是,我无法成功。我不知道为什么,但即使在alert内写之后,上述代码也没有响应。令我完全惊讶的是,在我分配height之前保留setTimeout时,它会起作用。所以我只是尝试CSS,但即使这样也行不通。这种方法的任何其他替代方案,如果可能的话,请解释为什么这不起作用?

更新

这不是链接问题的重复,因为它是纯jquery解决方案,我在这里处理一些jquery技术,链接答案中提到的解决方案都没有为我工作。我无法在小提琴中重现这个问题,因为它也特定于整个网站,copy-mode可能是一个可能的解决方案。

1 个答案:

答案 0 :(得分:1)

您的css()语法不正确。当使用object作为参数时,它是一个对象,您可以在其中拥有所需数量的属性。

变化:

.css({ 'min-height': height }, { 'max-height': height })

.css({ 'min-height': height, 'max-height': height  })