用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":this.height);
}
这样当图片的高度或宽度若超过590px，将会按比例压缩成590px，如果不超过则按原大小显示。

赞 (0)

相关推荐

  • 用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

  • 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

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

    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

  • 解决vuejs项目里css引用背景图片不能显示的问题

    解决:build->utils.js里,修改:增加 publicPath:'../../', if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath:'../../', fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } 以上这篇解决vuejs项目里css引用背景图片

  • Android 百度地图marker中图片不显示的解决方法(推荐)

    Android 百度地图marker中图片不显示的解决方法(推荐)

    目的: 根据提供的多个经纬度,显示所在地的marker样式,如下: 问题: 1.发现marker中在线加载的图片无法显示出来: 2.获取多个对象后,却只显示出了一个marker: 以下为官网实现方法: 通过查阅百度官网的文档,我们可以知道,地图标注物的实现方法如下: //定义Maker坐标点 LatLng point = new LatLng(39.963175, 116.400244); //构建Marker图标 BitmapDescriptor bitmap = BitmapDescript

  • python获取远程图片大小和尺寸的方法

    本文实例讲述了python获取远程图片大小和尺寸的方法.分享给大家供大家参考.具体分析如下: 这段代码通过urllib2打开远程图片,通过cStringIO读取文件内容,不用保存到磁盘即可读取图片文件的信息 #!/usr/bin/env python #encoding=utf-8 import cStringIO, urllib2, Image url = 'http://www.jb51.net/images/logo.gif' file = urllib2.urlopen(url) tmp

  • Python调整matplotlib图片大小的3种方法汇总

    Python调整matplotlib图片大小的3种方法汇总

    目录 问题 一.plt.figure(figsize=(n, n)) 二.plt.rcParams[‘figure.figsize’]=(n, n) 三.样式表+plt.style.use(‘xxx.mpstyle’) 补充:Python绘图问题:Matplotlib中指定图片大小和像素 总结 问题 如何设定matplotlib输出的图片大小? import matplotlib.pyplot as plt 一.plt.figure(figsize=(n, n)) 比如想让输出的图片大小为600

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

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

随机推荐