CSS控制图片大小-适应宽度

不知道家有没有遇到过这样的情况：在CSS控制图片大小时，如果把图片的宽度写死，比如 img{width:500px;} ，固然，如果图片宽度大于500px可以很好的控制它不让它过大，但如果图片宽度小于500px，比如说只有100px时，刚才的写法会把这张图扩大5倍显示，显然，这不是我们想看到的。

那么，CSS如何可以区分对待这些图片设置大小呢？很简单，请看：

代码如下:

img{width:expression(this.width>500?"500px":this.width+"px"); }

只要在CSS运用这段代码，就可以分别控制大图片与小图片。它的意思就是，如果图片宽度大于500px，那么图片就以500px的大小显示，如果小于的话，那么图片就按照原有尺寸显示！怎么样，是不是确实很简单？

弊端：增加客户端的负荷，一般用js实现的比较多。

赞 (0)

相关推荐

  • JavaScript 动态改变图片大小

    最近由于项目需要,在实现图片的时候,若图片大于100 X 100,则将其缩小为 100 X 100,若比这个小,则保持原图大小.经过研究发现,可以用Javascript代码简单实现. Javascript代码: 复制代码 代码如下: <script> function resizeImage(obj){if(obj.height>100)obj.height=100;if(obj.width>100)obj.width=100; } </script> 页面代码: 复制

  • css+js完美控制图片大小

    css+js完美控制图片大小

    使用js和css讲图片的现实控制在固定的区域内,大于这个区域的等比例缩放,小于这个区域的居中显示. css+js完美控制图片大小 0 && image.height>0){ flag=true; if(image.width/image.height>= 400/400){ if(image.width>400){ ImgD.width=400; ImgD.height=(image.height*400)/image.width; }else{ ImgD.width=i

  • javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版 原创

    javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版 原创

    我们整合篇,欢迎转载. 复制代码 代码如下: function controlImg(ele,w,h){ var c=ele.getElementsByTagName("img"); for(var i=0;i<c.length;i++){ var w0=c[i].clientWidth,h0=c[i].clientHeight; var t1=w0/w,t2=h0/h; if(t1>1||t2>1){ c[i].width=Math.floor(w0/(t1>

  • CSS控制图片大小-适应宽度

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

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

    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

  • js用拖动滑块来控制图片大小的方法

    本文实例讲述了js用拖动滑块来控制图片大小的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=gb2312"> <title&g

  • Android实现通过手势控制图片大小缩放的方法

    本文实例讲述了Android实现通过手势控制图片大小缩放的方法.分享给大家供大家参考,具体如下: 该程序实现的是通过手势来缩放图片,从左向右挥动图片时图片被放大,从右向左挥动图片时图片被缩小,挥动速度越快,缩放比越大.程序思路如下:在界面中定义一个ImageView来显示图片,使用一个GestureDetector来检测用户的手势,并根据用户的手势在横向的速度来缩放图片. 在介绍这个实例前,先介绍一下Android中处理手势触摸事件的大概框架. 一.添加语句实现OnGestureListener

  • 用css来控制图片大小显示的实现方法与代码

    有时候图片太大,会破环网页整齐的布局.这时可以用css来强制按比例压缩图片的高度或宽度 css代码如下: img,a img{ border:0;  margin:0;  padding:0; max-width:590px; width:expression(this.width>590?"590px":this.width); max-height:590px; height:expression(this.height>590?"590px":th

  • js 控制图片大小核心讲解

    缩放图片脚本分享 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" co

  • JS实现控制图片显示大小的方法【图片等比例缩放功能】

    JS实现控制图片显示大小的方法【图片等比例缩放功能】

    本文实例讲述了JS实现控制图片显示大小的方法.分享给大家供大家参考,具体如下: <!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"> <hea

  • JS滚轮控制图片缩放大小和拖动的实例代码

    具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .dragAble { position: relative; cursor: move; } .img-con { position: relative; width: 71

  • Android实现手势控制ImageView图片大小

    本文实例实现的主要功能是在ImageView中识别手势用以控制图片放大或缩小,具有一定的参考价值,分享给大家. public class MatrixImageView extends ImageView { private GestureDetector mGestureDetector; private Matrix mMatrix = new Matrix(); private float mImageWidth; private float mImageHeight; private f

随机推荐