这是一段网上搜得的自动调整图像大小的简易代码,它可以将超过大小的图像按比例缩放至设定范围内,IE下的工作非常好。例中,如果高大于300则把高调为300,宽按比例缩,反之一样。
但是在Firefox中却纹丝不动,尝试了一些小改变也未成功,请各位JS达人帮忙。<script language="JavaScript">
function SetImgSize(img) {
var maxWidth = 300;
var maxHeight = 300;
var imgWidth = img.width;
var imgHeight = img.height;
if(imgWidth <= maxWidth && imgHeight <= maxHeight) {
}
else {
if((maxWidth / maxHeight) > (imgWidth / imgHeight)) {
img.style.height = maxHeight;
img.style.width = imgWidth * (maxHeight / imgHeight);
}
else {
img.style.width = maxWidth;
img.style.height = imgHeight * (maxWidth / imgWidth);
}
}
}
</script>
只需在img中加入属性onload="SetImgSize(this);"即可。先行谢过
但是在Firefox中却纹丝不动,尝试了一些小改变也未成功,请各位JS达人帮忙。<script language="JavaScript">
function SetImgSize(img) {
var maxWidth = 300;
var maxHeight = 300;
var imgWidth = img.width;
var imgHeight = img.height;
if(imgWidth <= maxWidth && imgHeight <= maxHeight) {
}
else {
if((maxWidth / maxHeight) > (imgWidth / imgHeight)) {
img.style.height = maxHeight;
img.style.width = imgWidth * (maxHeight / imgHeight);
}
else {
img.style.width = maxWidth;
img.style.height = imgHeight * (maxWidth / imgWidth);
}
}
}
</script>
只需在img中加入属性onload="SetImgSize(this);"即可。先行谢过
解决方案 »
- 一个JQuery获取DIV高度的问题
- 请问一个jquery的问题
- 老问题!!FireFox和IE。。。。。。
- 求 一个 正则表达式 ======
- 如何从字符串中消除(去掉)一字串?
- 在w3c上看到的,点击同一个div四次,单击三次在那个div上出现不同的三句话,再点一次什么都消失了,怎么写js代码啊?
- 谁能告诉我JAVA中如何将行繁体字和简体字的转换啊?
- 怎样用JS去掉Select中的onchange,急.................................
- 如何在连接上点击左键也能弹出"另存为"的窗口?
- 请问script语言和标记语言(html)之间是如何分工的。在编写网页时标记语言和描述语言是不是分开的编写的
- 可移动层(要求兼容火狐,IE)
- 求类似CSDN论坛左边导航的代码
img.style.height = maxHeight+"px";
img.style.width = imgWidth * (maxHeight / imgHeight)+"px";
}
else {
img.style.width = maxWidth+"px";
img.style.height = imgHeight * (maxWidth / imgWidth)+"px";
}
未测试 但是这些地方是绝对要+上的
IE及火狐也OK。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title><script language="JavaScript">
function SetImgSize(img) {
var maxWidth = 300;
var maxHeight = 300;
var imgWidth = img.width;
var imgHeight = img.height;
if(imgWidth <= maxWidth && imgHeight <= maxHeight) {
}
else {
if((maxWidth / maxHeight) > (imgWidth / imgHeight)) {
img.style.height = maxHeight + "px";
img.style.width = imgWidth * (maxHeight / imgHeight) + "px";
}
else {
img.style.width = maxWidth +"px";
img.style.height = imgHeight * (maxWidth / imgWidth) +"px";
}
}
}
</script></head>
<body>
<img src="2.jpg" onmouseover="SetImgSize(this)" />
</body>
</html>
在ff下没有问题
我明白原因是什么了,因为我的图片宽 > 300,高 > 300,所以在FF下缩放出问题。现在我只要把条件改一下就OK了。