如何利用JS或者CSS样式来自动调整图片大小_框架

js版和css版自动按比例调整大小方法，分别如下：

<title>javascript大小处理函数</title>

var proMaxHeight = 150;

var proMaxWidth = 110;

function proDownImage(ImgD){

var image=new Image();

imagesrc=ImgDsrc;

if(imagewidth>0 && imageheight>0){

var rate = (proMaxWidth/imagewidth < proMaxHeight/imageheight)proMaxWidth/imagewidth:proMaxHeight/imageheight;

if(rate <= 1){

ImgDwidth = imagewidthrate;

ImgDheight =imageheightrate;

}

else {

ImgDwidth = imagewidth;

ImgDheight =imageheight;

}

</script>

</head>

<body>

</body>

纯css的防止撑破页面的代码，会自动按比例缩小：

content-width {MARGIN: auto;WIDTH: 600px;}

content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(thiswidth > 600 "600px" : thiswidth)!important;}

</style>

</div>

假如在页面有一个img标签： <img src="hyzqjpg" id="test_img" />

编写代码：

var img = documentgetElementById("test_img");

alert(imgoffsetWidth+","+imgoffsetHeight);

打印出来就是的宽度和高度。你可以试一下，Chrome绝对可以。

本来JS获取这个不是什么问题,但为设计浏览器时考虑到了安全问题所以你得到是只能是报错"没有权限"

你想啊,如果<input type="file"/>可以用JS赋值,可以访问文件大小,尺寸

你还敢用浏览器吗

这是我做的：

<html>

<head>

<meta >

方法一：获取的宽高。可以用offsetWidth和offsetHeight;

方法二：

你先获取img标签标签元素。用getElementById()或者getElementsByClassName或者getElementsByTagName()都可以。

获取之后，如果你的img有width和height 属性，可以直接用img元素对象点属性

documentgetElementsByTagName("img")[0]width;

documentgetElementsByTagName("img")[0]height;

3如果img元素本身没有width和height属性。你可以获取img元素的style样式

function getStyle(obj,attr){

return objcurrentStyleobjcurrentStyle[attr]:getComputedStyle(obj)[attr];

｝；

obj是你的img标签对象，attr是你的想要获取的属性；

currentStyle支持IE低版本浏览器，

getComputedStyle支持主流浏览器

以上就是关于如何利用JS或者CSS样式来自动调整图片大小全部的内容，包括:如何利用JS或者CSS样式来自动调整图片大小、关于JS获取图图片长宽的问题，在Chrome下总是为0、如何使用JavsScript获取本地图片的宽和高等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/9563710.html

如何利用JS或者CSS样式来自动调整图片大小

发表评论

评论列表（0条）