javascript - img 高度与 img 宽度成比例，但 img 宽度占父级的百分比

Question

我希望你能帮助我:)

我想定义 img 的高度，相对于图像的“实际”宽度。但宽度是动态的，因为它占父对象的百分比(wxample 的浏览器窗口)。

为什么我需要高度？:没有高度它工作正常，但我需要它，因为我希望所有图片的顶部在顶部相遇并且我的图片有不同的比例。 (我知道这会压缩图片......后来我用溢出修复了这个问题，在我找到了高度问题的解决方案之后)。

我怎么想，我需要一些东西来返回“实际”宽度的 px(例如，在用户更改浏览器窗口的大小之后)宽度。然后我可以将它乘以 3 并将其写入高度。 (1比3的比例)

Answer 1

这应该可以满足您的所有需求。

var img = document.getElementById('testImage');

// these vars are numbers representing a length in pixel
var w = img.width, h = img.height; // displayed dimensions, change on resize
var nw = img.naturalWidth, nh = img.naturalHeight; // dimensions of the original image file

var proportion = nh / nw; // proportion < 1 : 'portrait', < 1 : 'landscape'

由于宽度/高度会随着调整大小而变化，因此您必须在需要时更新它们。