html - 计算图像屏幕占用百分比

Question

假设我有 <img>标签。我可以获得图像的宽度和高度，如

width = 150px height=200px 

但我想图像占据多少屏幕？我有一个宽度为 100% 的表。此表包含列第一列我有一个 5% 的固定标识。

第二列我有一个 anchor 标记。第三列我有每行宽度和高度不同的图像。

现在我需要设置第二列 anchor 标记，以便文本根据第三列中的图像自动收缩或扩展。

假设图像宽度为 60%。现在第二列宽度应为 35%(即 100% -60% - 5% )那么如何计算图像宽度占(不是像素)

的百分比

感谢你的帮助

Answer 1

要计算图像的宽度，您可以使用 .width()。

例如:

imageWidth = $("img.imageClass").width();

话虽如此，为了以百分比计算宽度，您需要知道最宽图像的宽度。

$(window).load(function(){
    widestImg = 0;
    $("img.imageClass").each(function(){
        w = $(this).width();
        if (w > widestImg) { 
          widestImg = w;
        }
    });
});

最大图像的计算必须在窗口加载函数中运行，因为所有图像都需要加载才能进行准确评估。

现在你可以通过简单地除以得到你的百分比

percentage = $("img.imageClass").width() / widestImg;

添加提醒以获取可为您提供帮助的号码。

alert(percentage);