Question

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

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

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

如Determine original size of image cross browser?中所述：

您有两个选择：

选项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

}

我确信该解决方案适合您。

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

jQuery计算图像高度w / o css或height attrib set？

3 个答案: