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

时间：2022-06-14 21:19:32

I have a img I dont know width and height of the image.So I have to fit this image inside a static width and height area,after searching for solution i got max-width property manage these kind of issue. I used max-width property for my img tag.It works great.But I confused that, how the browser calculates based on this single property ,even it does not set this width as image width.

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

I know how to calculate the height of the image if i know the width.

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

Example

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

Result

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

MyQuestion To find height it should have static width, but the browser(i am using mozilla), how it calculate both width and height if its max-width attribute.So does it calculates as i did?

MyQuestion要找到高度,它应该有静态宽度,但是浏览器(我使用的是mozilla),它如何计算宽度和高度,如果它的最大宽度属性。它是否像我一样计算?

Please help me to find this..

请帮我找到这个..

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

1 个解决方案

#1

0  

I'm still not entirely sure about the end result your looking for but I worked this up and it reports the original size as well as the modified size after adjusting only the width.

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

<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>

#1

0  

I'm still not entirely sure about the end result your looking for but I worked this up and it reports the original size as well as the modified size after adjusting only the width.

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

<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>

标签：

相关文章