1

我正在尝试将图像添加到页面的末尾，获取它的高度和宽度，并使用这些值来计算页面上另一个图像的高度/宽度（这是用于在线方程式编辑器的）米建筑）。

我正在使用 CSS 设置高度，并希望宽度为我自动缩放。我需要在 jquery 中执行此操作，还是浏览器会自动为我执行此操作？

这是我正在尝试做的事情类型的示例。

$( 'body' ).append( '<img class="letter" src="my_image.png">' );
var new_element_height = $('.letter').last().outerHeight();
var new_element_width = $('.letter').last().outerWidth();
$('.letter').last().remove();
alert( new_element_height );
alert( new_element_width );

我的 CSS 类似于：

.letter {
    height: 50px;
}

new_element_height 给了我 50px，new_element_width 给了我 0px。我猜这是因为我正在动态加载这些图像，然后尝试获取高度/宽度。

我希望高度为 50px，宽度正确缩放到该高度，然后将这些值放在 new_element_height/new_element_width 变量中。

4

1 回答 1

3

看起来您正试图在加载图像之前获取图像尺寸。请参阅JavaScript：了解图像何时完全加载

有关工作演示，请查看http://jsfiddle.net/eBrnu/2/尝试将高度设置为不同的值，您将看到宽度也会发生变化。

此外，您可能希望至少visibility: hidden在 CSS 中进行设置，以使图像不会闪烁，但仍会占用空间。

于 2012-08-20T03:07:32.607 回答