javascript - 计算其对应右侧div的图像高度

Question

我有以下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 中产生以下输出

我正在尝试设置右侧的高度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技术以及链接答案中提到的解决方案都不适合我。我无法在 fiddle 中重现这个问题，因为它也特定于整个站点和 jquery可能是解决此问题的一种可能的解决方案。

Answer 1

您的 css() 语法不正确。当使用对象作为参数时，它是一个对象，您可以根据需要在其中拥有任意多个属性。

更改:

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

致

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