html图片等比例拉伸,CSS控制图片等比例缩放
我们经常会需要把用户上传的图片等比例缩放在我们的网页上显示,下面我来介绍利用css控制图片比例缩放与javascript实现的方法,有需要了解的朋友可参考参考。
按比例缩小或者放大到某个尺寸,对于标准浏览器(如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 code中嵌入javascript code
来实现图片的缩放 代码如下 复制代码
.thumbImage {max-width: 100px;max-height: 100px;} /* for Firefox & IE7 */
* html .thumbImage { /* for IE6 */
width: expression(this.width > 100 && this.width > this.height ? 100 : auto);
height: expression(this.height > 100 ? 100 : auto);
}
改写一下。 代码如下 复制代码
#content img{height: expression(this.width > 600 ? this.height = this.height * 600 / this.width : "auto");
width: expression(this.width > 600 ? "600px" : "auto");
max-width:600px;}
在IE6、IE7下可以实际大图片按比例缩小,不会出现图片变形的情况,在FF和chrome下,expression无效,但通过max-width限制图片最大宽度,使页面不会被撑开。
css代码不可能兼容所有浏览器,后来找了一个js代码完美的解决了这些问题 代码如下 复制代码
function AutoResizeImage(maxWidth,maxHeight,objImg){
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1;
var w = img.width;
var h = img.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth ==0 && maxHeight==0){
Ratio = 1;
}else if (maxWidth==0){//
if (hRatio<1) Ratio = hRatio;
}else if (maxHeight==0){
if (wRatio<1) Ratio = wRatio;
}else if (wRatio<1 || hRatio<1){
Ratio = (wRatio<=hRatio?wRatio:hRatio);
}
if (Ratio<1){
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}
html图片等比例拉伸,CSS控制图片等比例缩放相关推荐
- css 控制图片的横竖比例
大概你也遇到过"图片高度是宽度50%"这的需求 这需求看起来简单, 其实却非常麻烦 因为元素的宽高的百分比是相对于父元素的宽高计算的 所以直接设 width, height 是不符 ...
- html怎么设置扩大缩小不变形,DiV里CSS控制图片按比例扩大缩小不变形
一般来说,我们设定一定宽度高度的div标签,在里面放上图片,只有当图片大小尺寸符合这个宽度和高度的时候显示最佳.那有的时候不同的界面,同样的信息(比如头像)放大的尺寸是不一样,怎么才能让图片根据DIV ...
- html文字图片同一行,CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见欢思 ...
- html文字于图片齐平,CSS控制图片和文字在同一行对齐显示
图片与文字是做网站必不可少的要素,我们在使用图片与文字布局时,如何让图片和文字在同一行对齐显示来制作出一个整齐的网页出来. 对于一些学做网站新手来说,图片和文字在同一行对齐显示却不是一件容易的事情,这 ...
- css中图片整合的使用,CSS Sprites:图片整合技术详细案例
CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度.介绍了CSS Sprites技术的实现方法,优点和缺点.最后通过实例CSS Sprites技术制作导航栏演 ...
- css 控制图片最大宽度
CSS 限制图片最大宽度 (本文来自本站原创,转载请务必注明出处!) 我们在制作一个网页的时候,经常要对一个区域里可能出现的图片的宽度进行限制,不然它可能会把页面撑得很烂很烂. 如果你采用固定宽度,长 ...
- CSS控制图片大小、边框、对齐方式、文字环绕
CSS操作图片大小 width属性和height属性可以用于定义图片大小. width属性和hieght属性的属性值都是像素. CSS操作图片边框 border-width属性用于定义<img& ...
- css 背景平铺 控制范围,css如何让背景图片平铺?css背景图片平铺四种方式介绍...
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
- php js 图片旋转,jQuery实现可以控制图片旋转角度效果
本文实例讲述了jQuery实现可以控制图片旋转角度效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下:/p> "http://www.w3.org/TR/xhtm ...
最新文章
- 第四章 菜单、工具栏和状态栏(第8课)
- selenium中webdriver跳转新页面后定位置新页面的两种方式
- KMP,深入讲解next数组的求解(转载)
- abb机器人建立工件坐标系_ABB机器人大地坐标系修改案例
- 一 ASP.NET Html 表单
- Hibernate之表间关系
- Android dp、dip、dpi、px、sp简介及相关换算,及其应用实例
- 在Service中发送广播被kill掉的Activity能不能收到?
- 华为将在数据库市场挑战Oracle:5月15日发布云数据库产品
- SyntaxError: Non-ASCII character ‘\xe7’ in file car-training.py on line 7, but no encoding declared;
- 拉起客户端 Universal Links Scheme Open App iOS(Deep Link)
- 《算法导论》第四版 电子版 全网第一时间发布eBookhub
- 湖南大学应用经济学考研考情与难度、参考书及上岸前辈备考经验
- 火绒阻止腾讯过度侵权行为,马化腾自查承认是团队违规,腾讯电脑管家道歉
- “L3级”自动驾驶落地指导思想:高速辅助人,低速替代人
- php使用二进制判断图片(或文件)真实类型(可判断远程图片)
- ARFoundation系列讲解 - 31 光照估计
- Charles(Mac)抓取安卓手机app的包
- 嵌入式接口之TIM定时器与NVIC的STM32模板库函数的一些解释
- 第六讲从源码中提取选股公式
热门文章
- Javascript第五章获取DOM对象的属性,加游览器搜索框内容点击跳转源码第七课
- java 3d文字旋转_3d多物体点旋转
- python函数装饰器详解_Python语言函数装饰器用法实例详解
- php 动态引用dll文件路径,win平台环境变量与dll动态链接库搜索路径小结
- oracle用户权限管理
- scala练习题1 基础知识
- MFC中 给基于CFormView的单文档添加背景图片
- asp.net中注册脚本的两个方法
- 【个人笔记】OpenCV4 C++ 快速入门 00课
- python合并两个数据框_python-3.x - 如何使用匹配索引合并两个数据框? - SO中文参考 - www.soinside.com...