图片会自动按比例缩小(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,如需转载请自行联系原作者



相关文章
|
6天前
|
前端开发 JavaScript 开发者
css和js
【4月更文挑战第22天】css和js
19 6
|
3天前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
|
4天前
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
|
4天前
|
前端开发
css实现动态旋转图片,
css实现动态旋转图片,
5 0
|
4天前
|
前端开发 JavaScript UED
CSS顶部与JS后写:网页渲染的奥秘
CSS顶部与JS后写:网页渲染的奥秘
|
6天前
|
前端开发 JavaScript 索引
CSS常见用法 以及JS基础语法
CSS常见用法 以及JS基础语法
14 0
|
6天前
|
JavaScript 前端开发
js和css以及js制作弹窗
js和css以及js制作弹窗
12 1
|
6天前
|
前端开发 UED 开发者
【专栏:HTML与CSS实战项目篇】制作一个响应式图片画廊
【4月更文挑战第30天】本文介绍了如何使用HTML和CSS创建响应式图片画廊。响应式画廊能根据用户设备屏幕大小自动调整布局。首先规划结构,包含一个图片容器和每张图片元素,并为图片提供替代文本。接着设计样式,设置图片大小、间距和视觉效果。然后通过媒体查询实现响应式设计,根据不同屏幕尺寸调整图片排列。同时考虑性能优化,如压缩图片和使用懒加载技术。最后,测试和调试确保画廊在各种设备上正常工作。这个过程强调了响应式设计和用户体验的重要性。
|
6天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
28 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
6天前
|
前端开发 JavaScript 索引
前端 富文本编辑器原理——从javascript、html、css开始入门(一)
前端 富文本编辑器原理——从javascript、html、css开始入门
39 0