Question

我有一个img我不知道图像的宽度和高度。所以我必须在静态宽度和高度区域内放置这个图像，在搜索解决方案后我得到max-width属性来管理这些有点问题。我使用max-width属性作为我的img标签。它工作得很好。但我很困惑，浏览器如何基于这个单一属性计算，即使它没有将此宽度设置为图像宽度。

如果我知道宽度，我知道如何计算图像的高度。

示例

original width = 100px;
original height=200px;
default width = 50px;
default height = original height/original width*default width;
default height = 200/100*50 = 100px;

结果

default width = 50px; //default static width i set
default height = 100px; //dynamic based on default width and aspect ratio

MyQuestion 要找到高度，它应该有静态宽度，但是浏览器（我使用的是mozilla），它如何计算宽度和高度，如果它的max-width属性。它会像我一样计算吗？

请帮我找到这个..

＆＃13;

<img src="http://ad009cdnb.archdaily.net/wp-content/uploads/2009/11/1258661197-009-f0-reception.jpg" style="max-width:200px"/>

＆＃13;

Answer 1

我仍然不完全确定您要查找的最终结果，但我对此进行了处理，并在仅调整宽度后报告原始尺寸以及修改后的尺寸。

＆＃13;

<html>
<body>

    <img id="image1">
	<hr>
	<div id="result"></div>
<script type="text/javascript">

function getImgSize(img,imgelem) {
	result = document.getElementById("result");
	width = img.width;
	height = img.height;

	document.getElementById(imgelem).width = (width*2);

	newwidth = document.getElementById(imgelem).width;
	newheight = document.getElementById(imgelem).height;

	result.innerHTML = "<br>original width: "+width+"<br>original height: "+height;
	result.innerHTML += "<br>new width: "+newwidth+"<br>new height: "+newheight;
}

img1 = new Image();
img1.src="images/example_image.gif";
document.getElementById("image1").src = img1.src;
img1.onload = function() {getImgSize(img1,"image1");};

</script>

</body>
</html>

＆＃13;

如果图像的max-width属性设置为某个值，则获取图像的宽度和高度

1 个答案: