网页里控制图片大小的相关代码

2016-02-19 12:53 3 1 收藏

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程，今天给大家分享网页里控制图片大小的相关代码教程,希望对大家能有一点小小的帮助。

【 tulaoshi.com - Web开发】

１、用鼠标拖动来改变大小
SCRIPT LANGUAGE="JavaScript"
function resizeImage(evt,obj){
newX=evt.x
newY=evt.y
obj.width=newX
obj.height=newY
}
/script
img src="7say.gif" ondrag="resizeImage(event,this)"

２、用鼠标滚动控制图片大小
img src="7say.gif" onmouseenter="focus();" onmouseout="blur();" onmousewheel="width+=(window.event.wheelDelta==120)?-5:+5;"

３、图片标签里用代码控制大小
img border="0" src="[!--picurl--]" onload="if(this.widthscreen.width-500)this.style.width=screen.width-500;"

４、CSS控制图片大小
1. css2直接实现: img{max-width: 500px;} (IE暂不支持)
2. expression实现: img{width:expression(width500?"500px":width);} (IE only)
3. 使用js. 方法: 用 document.getElementsByTagName("IMG") 的方法取得全部img元素遍历img元素判断其宽度并做相应操作

来源:https://www.tulaoshi.com/n/20160219/1602339.html

看过《网页里控制图片大小的相关代码》的人还看了以下文章更多>>

wps中怎么修改图片大小

标签：电脑入门

这里介绍两种常用的方式：直接移动尺寸控点：将鼠标指针置于图片的一个尺寸控点之上。拖动尺寸控点，直至得到所需的形状和大小。在设置对象格式对话框中更改：在右键菜单中，选择设置对象格式。弹出设置对象格式对话框,选择大小选项卡。要相应的文本框中键入或选择所需的确切值。如果要复位图片的原始大小，请单击原始尺寸下的...

CSS控制图片成比例缩放

标签： Web开发

按比例缩小或者放大到某个尺寸，对于标准浏览器（如Firefox），或者最新都IE7浏览器，直接使用max-width,max-height；或者min-width,min-height的CSS属性即可。如： img{max-width:100px;max-height:100px;} img{min-width:100px;min-height:100px;} 对于IE6及其以下版本的浏览器，则可以利用其支持的expression属性，在css co...

CSS样式控制图片裁切显示

标签： Web开发

我们在论坛新闻系统的时候，其中的有些图片会比较大破坏了整体布局的美观，现通过CSS定义方式使图片进行裁切显示，即，当图片的容器不足以显示整个图片时，会以左上角为开始显示，不足显示的将会隐藏。相关各位同仁也有此想法。现有以下CSS样式，所以贴出来同各位WEB 开发者共享！当然有人用img 的onload 事件对其宽高进行js控制，不...

ImageFlow可鼠标控制图片滚动

标签： Web开发

You are free to use this in any product, or on any web site. For more information about ImageFlow read the Documentation and check my Newsblog. For anything else simply ...

画图软件如何快速缩小图片大小

画图软件如何快速缩小图片大小越来越多的人有能力购买和拥有一台属于自己的相机，并随时随地拍摄下身边美好的一切，但是我们发现照相机拍下的文件像素很高，所以照片很大，分辨率高的甚至都达到10M。然而有些照片，并不需要细致入微地查看，所以浪费了硬盘空间。那么如何快速缩小图片大小呢?今天就教大家，很简单的哦!一起来...

查看更多精彩>>