jQuery 高度似乎不对

Question

我必须根据客户端的模式(纵向或横向)调整图像的大小。

但是，jQuery 给我的高度似乎是错误的。 图片位于一个包装 DIV 中，它具有最大高度和溢出:隐藏，但报告的高度似乎仍然是 height:auto

这是我的 HTML(示例)

<div class="fix">
    <div class="content">
        <img src="">
    </div>
</div>
<div class="max">
    <div class="content">
        <img src="">
    </div>
</div>

CSS

div{
    border: 1px solid black;
    position:relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow:hidden;
}
.fix{
    height:200px;
    border: 1px solid red;
    overflow:hidden;
}
.max{
    max-height:200px;
    border: 1px solid blue;
    overflow:hidden;
}

和JS代码

$('.content').each(function(){
   alert($(this).height());
});

这是我的 fiddle :

http://jsfiddle.net/MLa9Z/

Answer 1

正如其他人所说，您正在检查的 div 报告了正确的高度。他们的 parent 是您设置限制的对象。

将 overflow: hidden 想象成一个窗口而不是一个绘图程序。如果你向窗外看，看到一棵树的一部分，树的其余部分没有被“裁剪”或不存在……你只是看不到它。这棵树仍然 [在此处插入数字] 英尺高。

现在，如果您将 max 和 fix 类粘贴到 content div 而不是/以及它们的容器上，那么您的代码将报告您认为应该报告的大小。