图片会自动按比例缩小(js版和css版)

简介:

 

<title>javascript图片大小处理函数</title>
<script language=Javascript>
var proMaxHeight = 150;
var proMaxWidth = 110;

function proDownImage(ImgD){
      
var image=new Image();
      image.src
=ImgD.src;
      
if(image.width>0 && image.height>0){
      
var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
    
if(rate <= 1){   
     ImgD.width 
= image.width*rate;
     ImgD.height 
=image.height*rate;
    }
    
else {
                          ImgD.width 
= image.width;
                          ImgD.height 
=image.height;
                  }
      }
}
</script>

</head>

<body>

<img src="999.jpg" border=0 width="150" height="110"  onload=proDownImage(this);   />
<img src="room.jpg" border=0 width="150" height="110" onload=proDownImage(this);   />
</body>

 

 

纯css的防止图片撑破页面的代码,图片会自动按比例缩小

<style type="text/css">
.content-width 
{MARGIN: auto;WIDTH: 600px;}
.content-width img
{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;}
</style>


<div class="content-width">
  
<p><img src="/down/js/images/12567247980.jpg"/></p>
  
<p><img src="/down/js/images/12567247981.jpg"/></p>
</div>


    本文转自曾祥展博客园博客,原文链接:http://www.cnblogs.com/zengxiangzhan/archive/2009/09/12/1565323.html,如需转载请自行联系原作者



相关文章
|
1月前
|
前端开发 计算机视觉 开发者
利用CSS改变图片颜色的100种方法!
利用CSS改变图片颜色的100种方法!
32 1
|
1月前
|
JavaScript 前端开发 API
js截取图片地址后面的参数和在路径中截取文件名或后缀名
在处理网页上的图片资源或者其他类型的文件资源时,你可能会遇到需要使用这些技巧的情况。以下是一些具体的使用场景:
11 0
|
25天前
css3鼠标悬停图片特效源码
css3鼠标悬停图片特效,图片悬停效果源码,可以在网页上面作为自己的动态加载名片,放到侧边栏或者网站合适的位置即可
13 0
css3鼠标悬停图片特效源码
JS+CSS随机点名详细介绍复制可用(可自己添加人名)
JS+CSS随机点名详细介绍复制可用(可自己添加人名)
|
1月前
|
前端开发 JavaScript
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
24 0
|
1月前
|
前端开发 JavaScript UED
前端开发的魔法:CSS动画与JavaScript的完美结合
本文将探讨如何利用CSS动画和JavaScript的结合,为前端页面增添生动的效果。我们将通过实例展示如何使用这两种技术为网页元素创建吸引人的动画效果,并讨论它们的优缺点和适用场景。
27 0
|
1月前
|
缓存 自然语言处理 前端开发
JS/CSS体积减少了67%,我们是如何做到的?
JS/CSS体积减少了67%,我们是如何做到的?
18 1
|
1月前
|
JavaScript
js判断图片是否加载完成
js判断图片是否加载完成
23 0
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。