jquery - jQuery计算图像高度w/o css或高度属性集？

Question

我有一个带有一些图像的响应式布局。图像已max-width:100%设置。并且不能在 CSS 或 HTMLheight属性中预设高度，否则图像会随着响应式布局变小而扭曲。它必须是height: auto;为了正确扩展。

是否可以在 jQuery 中计算图像的高度？.height()并.css('height')依赖于要设置的 css 或 height 属性，就像我说的那样，当响应式设计改变大小时，我无法在不扭曲图像的情况下设置这些属性。

Answer 1

我的问题最终是这样.height()并.css('height')返回 0，因为调用该代码时图像尚未加载。

为了获得高度，我运行了以下命令：

$(document).ready(function(){
  $('img.whatever').load(function(){
    console.log($(this).height()); // calculates height correctly after image is loaded.
  });
});

Answer 2

您可以使用 outerHeight()

http://api.jquery.com/outerHeight/

Answer 3

如确定图像跨浏览器的原始大小中所述？：

您有 2 个选项：

选项1：

去掉width和height属性，读取offsetWidth和offsetHeight

选项 2：

创建一个 JavaScript 图像对象，设置 src，并读取宽度和高度（您甚至不必将其添加到页面即可执行此操作）。

function getImgSize(imgSrc) {
    var newImg = new Image();

    newImg.onload = function() {
    var height = newImg.height;
    var width = newImg.width;
    alert ('The image size is '+width+'*'+height);
    }

    newImg.src = imgSrc; // this must be done AFTER setting onload

}

我相信该解决方案对您有用。

如果您只是更改图像的高度或宽度，则不应扭曲纵横比。