Img高度与img宽度成比例，但img宽度以父亲的％为单位

Question

我希望你能帮助我:)

我想根据图像的“实际”宽度定义img的高度。但宽度是动态的，因为它是父对象的％（wxample的浏览器窗口）。

为什么我需要高度？： 没有高度它工作正常，但我需要它，因为我希望顶部的alle图片在顶部相遇，我的图片有不同的比例。 （我知道这会压缩图片......后来我解决了高度问题后我用溢出来解决这个问题）。

我的想象，我需要的东西可以返回'实际'的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'

由于调整大小时宽度/高度发生变化，您必须在需要时更新它们。