0

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

然而，jQuery 给我的高度似乎是错误的。图像位于一个包装 DIV 内，该 DIV 具有最大高度和溢出：隐藏，但报告的高度似乎仍然是高度：自动

这是我的 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/

4

2 回答 2

1

您给定高度的 div 有 200 像素，但其中的 div（带有类内容）没有。本质上，您隐藏了任何溢出内容，但内容的大小保持不变。

尝试检查您的元素并使用指标 (chrome) 或布局 (firebug) 选项卡查看实际高度。

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

.fix img{
    height:200px;
}
于 2013-05-17T16:54:45.740 回答
1

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

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

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

于 2013-05-17T17:03:08.677 回答