在 html 页面上显示大图像后如何获取大图像的宽度和高度？

【问题标题】：How can I get width and height of big image after displaying it on html-page?在 html 页面上显示大图像后如何获取大图像的宽度和高度？
【发布时间】：2014-09-18 02:44:57
【问题描述】：

我有一张大图，例如 10000x8000 像素。在这种情况下，我使用 CSS class .myClass { max-width: 90vw; 减小图像的宽度和高度最大高度：80vh； } 如何在 html 页面上显示此图像后获取其宽度和高度。例如，如果我有 1200x800 显示器，我想使用 $(img).width() 或 $(img).height() 获得 960x640px 的结果。可能吗？当我使用 $(img).width() 或 $(img).height() 时，得到自然大小 10000x8000px。 img.clientWidth 返回 0。

【问题讨论】：

你能为此创建一个演示吗？ As you can see here jQuery 没有显示您在此演示中描述的行为。
我用我的代码 jsfiddle.net/ruvp2odL 创建了一个演示。有用。可能在 img.src = "data:image/png;base64," + encode64image; 行有问题

标签： javascript jquery html css

【解决方案1】：

我的理解是，如果图像太大，您想减小图像的大小。假设div.image 是下面代码中的图像并检查代码。使用此代码获得您想要的结果..

var width = $(".image").width();
var height = $(".image").height();

if(width > 900) {
  
	var newWidth = (width * 80) / 100; // reduce to 80% width
  $(".image").css("width", newWidth);
  
  
}

if(height > 900) {
	var newHeight = (height * 80) / 100; // reduce to 80% width
  	$(".image").css("height", newHeight);
}

.image{
  width: 1000px;
  height: 1000px;
  background-color: blue;
  display:block;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image">
</div>

【讨论】：