Question

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

然而，jQuery的高度让我觉得不对劲。图像在包装DIV内部，它具有最大高度和溢出：隐藏，但仍然报告的高度似乎是高度：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());
});

这是我的小提琴：

http://jsfiddle.net/MLa9Z/

Answer 1

你给出固定高度的div有200px，但是那个（带有类内容）的div不是。基本上你隐藏了任何溢出内容，但内容的大小保持不变。

尝试检查您的元素并使用指标（chrome）或布局（firebug）标签查看实际高度。

如果要调整图像大小，则必须将样式直接应用于图像，而不是父元素，否则您将裁剪图像（使用overflow：hidden）

.fix img{
    height:200px;
}

Answer 2

正如其他人所说，你正在检查的div正在报告正确的高度。他们的父母就是你设定限制的那些。

将overflow: hidden视为一个窗口，而不是绘画程序。如果你向窗外看，看到树的一部分，树的其余部分不会被“裁剪”或不存在......你只是看不到它。树仍然是[在这里插入数字]英尺高。

现在，如果您将max和fix类添加到content div而不是/ as-well-作为其容器，那么您的代码将报告您的大小认为它应该是报道。

jQuery的高度似乎错了

2 个答案: