0

我有一个包含图像 (img) 的 jquery 对话框。我正在尝试设置框的高度以匹配图像，但我发现两者都设置为小于我指定的值。例如，以下几行：

console.log("h1 " + $('#display').height());
$("#display").dialog('option', 'height', img.height);                               
console.log("h2 " + $('#display').height());
console.log("ih " + img.height);

向控制台生成以下输出：

h1 564 
h2 564 
ih 640

这向我表明 $('#creativeImageDisplay').height() 是指内部高度，但选项中的“高度”是指外部高度。有没有办法设置内部高度（使得外部高度相应增加）？

编辑

('#display').outerHeight(true) 652 
('#display').outerHeight(false) 652 
('#display')innerHeight() 652
4

3 回答 3

0

生成对话框后，它将输出如下内容：

<div class="ui-dialog ...">
    <div class="ui-dialog-titlebar ..."> ... </div>
    <div id="display" class="ui-dialog-content ..."> ....</div>
    <div class="ui-dialog-buttonpane ..."> ... </div>
</div>

您可以简单地尝试$("#display").height(im.height());内部高度。

于 2012-07-18T10:38:34.770 回答
0

HTML：

<div id="panel">
  <input type="button" id="btndialog1" name="btndialog1" value="Show Dialogue1"/>
  &nbsp;
  <input type="button" id="btndialog2" name="btndialog2" value="Show Dialogue2"/>
  <br/>
  <div id="imgdialog1" title="Dialogue1 with Image">
    <p>
      <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" id="img1">
    </p>
  </div>
  <div id="imgdialog2" title="Dialogue2 with image">
    <p>
      <img id="img2" src="http://www.xda-developers.com/wp-content/uploads/2011/02/android_boot_image.jpg"/>
    </p>
  </div>
</div>

查询：

$(function() {
    $('#imgdialog1').dialog({
        autoOpen: false,
        'width': 'auto',
        'height': 'auto'
    });
    $('#imgdialog2').dialog({
        autoOpen: false,
        'width': 'auto',
        'height': 'auto'
    });
    $("#btndialog1").click(function() {
        $('#imgdialog1').dialog('open');
    });
    $("#btndialog2").click(function() {
        $('#imgdialog2').dialog('open');
    });
});

我已经做了垃圾箱，所以试试http://codebins.com/bin/4ldqpad

于 2012-07-18T11:04:03.583 回答
0

只是为了整洁。感谢您提供的所有有用的意见。事实证明，问题在于我将图像位置设置为“固定”，这由于某种原因阻止了自动调整大小的工作。

于 2012-09-10T14:57:02.593 回答