CSS自动控制图片大小的代码

 　　Css防止图片尺寸过大

　　添加如下CSS：

 代码如下  

img {  
max-width: 800px;  
height: auto;  
} 

　　代码中的max-width:800px限制图片的最大宽度为800像素，而下面的hight:auto很关键，可以保证图片有正确的长宽比，不至于因为被调整宽度而变形。

　　实用例子

　　WordPress自动调整图片大小

　　1、打开你的“样式表 (style.css)”文件，然后在 p img{ 或类似的地方添加下列代码(可以将所有550改成你想要的宽度)

 代码如下  

p img{
max-width: 550px;
width: expression(this.width > 550 ? "550px" : true);
height: auto;
}

　　2、清空缓存就可以啦!

　　3、同样对于某些老版本IE不支持。

　　如果你想兼职所有浏览器jq或js是最好的办法

 代码如下  

//  方法：setSelectReadOnly  用于设定极select控件ReadOnly, 
//这个一个模拟只读不是真的只读 
//使用了onbeforeactivate,onfocus,onmouseover,onmouseout事件 
//示例：< img src='img.jpg' onload='ImgAutoSize(ImgD,FitWidth,FitHeight)' > ; 
//  create by sl  
// --------------------------------------------------- 
function ImgAutoSize(imgD,FitWidth,FitHeight)  
{ 
var image1=new Image();  
image1.onload = function () 
{ 
if(this.width>0 && this.height>0)  
{  
if(this.width/this.height>= FitWidth/FitHeight)  
{  
if(this.width>FitWidth)  
{  
imgD.width=FitWidth;  
imgD.height=(this.height*FitWidth)/this.width;  
}  
else  
{  
imgD.width=this.width;  
imgD.height=this.height;  
}  
}  
else  
{  
if(this.height>FitHeight)  
{  
imgD.height=FitHeight;  
imgD.width=(this.width*FitHeight)/this.height;  
}  
else  
{  
imgD.width=this.width;  
imgD.height=this.height;  
}  
}  
} 
image1 = null; 
}

image1.src=imgD.src;  
imgD.style.cursor = 'hand'; 
imgD.onclick= function(){openWin(this.src,'imgphoto',600,400)}; 
imgD.title = "点击在新窗口中查看原图"; 
}
时间： 2024-11-04 09:37:45

CSS自动控制图片大小的代码的相关文章

css实现图片圆角效果代码

 代码如下 复制代码 <!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=&qu

CSS控制图片大小-适应宽度_经验交流

不知道家有没有遇到过这样的情况:在CSS控制图片大小时,如果把图片的宽度写死,比如 img{width:500px;} ,固然,如果图片宽度大于500px可以很好的控制它不让它过大,但如果图片宽度小于500px,比如说只有100px时,刚才的写法会把这张图扩大5倍显示,显然,这不是我们想看到的.     那么,CSS如何可以区分对待这些图片设置大小呢?很简单,请看:  复制代码 代码如下: img{width:expression(this.width>500?"500px":t

PHP截取指定图片大小实例代码

header("Content-type: image/jpeg");  $filename = 'book_rabbit_rule.jpg'; /* 读取图档 */ $im = imagecreatefromjpeg($filename);  /* 图片要截多少, 长/宽 */ $new_img_width = 120; $new_img_height = 42;  /* 先建立一个 新的空白图档 */ $newim = imagecreate($new_img_width, $ne

用CSS给图片打标的代码_经验交流

<!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-

css控制图片透明效果代码

测试效果1 测试效果-改变角度 分别修改.perspective-r的border-top和.perspective-b的border-left的width值,值越大角度越大:同时修改.perspective-r的高度值和.perspective-b的宽度值. 测试效果-改变距离 分别修改.perspective-r的border-left和.perspective-b的border-top的width值,值越大距离越大:增加.perspective-outer的宽度和高度值,并修改.persp

CSS控制图片使它自适应大小代码

图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 下面就为你提供两种方法,我个人推荐第一种方法 方法一 CSS控制图片大小代码 <style type="text/css"> img { border:0; margin:0; padding:0; max-width:200px; width:expression(this.width>200?"200px

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

1.用鼠标拖动来改变大小 <SCRIPT LANGUAGE="JavaScript">function resizeImage(evt,obj){newX=evt.xnewY=evt.yobj.width=newXobj.height=newY}</script><img src="7say.gif" ondrag="resizeImage(event,this)"> 2.用鼠标滚动控制图片大小 <img

php实现在服务器端调整图片大小的方法

 本文实例讲述了php实现在服务器端调整图片大小的方法.分享给大家供大家参考.具体分析如下: 在服务器端完成图片大小的调整,会比在浏览器的处理有很多的好处. 本文介绍了PHP如何在服务器端调整图片大小. 代码包括两部分: ① imageResizer() is used to process the image ② loadimage() inserts the image url in a simpler format ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

php实现在服务器端调整图片大小的方法_php技巧

本文实例讲述了php实现在服务器端调整图片大小的方法.分享给大家供大家参考.具体分析如下: 在服务器端完成图片大小的调整,会比在浏览器的处理有很多的好处. 本文介绍了PHP如何在服务器端调整图片大小. 代码包括两部分: ① imageResizer() is used to process the image ② loadimage() inserts the image url in a simpler format <?php function imageResizer($url, $wid