[css或js控制图片自适应]
[css或js控制图片自适应]
图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?
此个人博客想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了。我们看下面的代码:
div img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?”600px”:”auto”);
overflow:hidden;
}
max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
width:600px; 在所有浏览器中图片的大小为600px;
当图片大小大于600px,自动缩小为600px。在IE6中有效。
overflow:hidden; 超出的部分隐藏,避免控制图片大小失败而引起的撑开变形。
========================================================
如果想设定图片的高度和宽度都不超过某一个固定值,就需要在图片高度或宽度超过这个值的时候,让图片按比例缩小到这个尺寸。
1,对于现代浏览器,比如Firefox或是IE7及以上,直接使用max-width和max-height两条CSS属性即可。
2,对于IE 6.0及以下版本,以上两条CSS属性均不会被理会。之前处理这种事情,我们往往会借助Javascript,然后为图片加上onload事件。例如:
<imgsrc="..."alt="..."onload="resizeImage(this)"/>
<script type="text/javascript">
function resizeImage(obj){
obj.width=obj.width>50&&obj.width>obj.height?50:auto;
obj.height=obj.height>50?50:auto;
}
</script>
本文来源于吴旭晓的个人博客 http://www.wuxuxiao.com , 原文地址:http://www.wuxuxiao.com/news/newsview.html?id=110
[css或js控制图片自适应]的更多相关文章
- nginx实现动态分离,解决css和js等图片加载问题
改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...
- 【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...
- js 控制图片大小核心讲解
控制图片大小的方法有很多,在本文将为大家详细介绍下使用js实现缩放图片,核心代码如下,感兴趣的朋友可以参考下 缩放图片脚本分享 <!DOCTYPE HTML PUBLIC "-//W3 ...
- css控制图片自适应大小
相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决. 该CSS的功能是:大于600的图片自动调整为600显示. <style ...
- js控制图片自动缩放,实现铺满盒子,不变形,完全局中
此js一般用于控制图片铺满盒子,但是比例不变,并且绝对局中原理:判断图片的高宽与盒子高宽的大小的关系,然后通过比例来控制图片的缩放及定位<!DOCTYPE html PUBLIC "- ...
- Gulp实现css、js、图片的压缩以及css、js文件的MD5命名
目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩.图片转base64.css和js的压缩以及合并,文件的md5重命名 -- ...
- js控制图片缩放、水平和垂直方向居中对齐
已測试兼容 IE6,IE7,IE8,火狐FF,谷歌chrome. 这里使用了jquery插件,假设你不使用jquery,略微改造一下也非常快. 网上查了些资料,用css控制兼容性不好,看去非常揪心.于 ...
- css和js引用图片的路径问题
原文转自:http://www.cnblogs.com/azumia/archive/2012/06/17/2552346.html 在JS文件中书写相对路径:JS文件是指在页面中引用的外部JavaS ...
- CSS实现网页背景图片自适应全屏
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
随机推荐
- HashMap最大容量为什么是2的32次方
123456观察jdk中HashMap的源码,我们知道极限值为2的31次方. void resize(int newCapacity) { Entry[] oldTable = table; int ...
- zoj 3861(dfs)
Valid Pattern Lock Time Limit: 2 Seconds Memory Limit: 65536 KB Pattern lock security is genera ...
- Ruby - 创建自己的GEM
Log 1 创建自己的gem 背景:好奇gem包的用法,首先搞清楚什么是gem包.那我们就先来创建一个自己的gem包. 时间:2014-3-8 环境:Ubuntu + Ruby 1.9.3 记录:Ro ...
- ExtJS 4 MVC Viewport和card布局
http://ext4all.com/post/a-little-bit-strange-navigation 效果图: app/view/Viewport.js Ext.define('App.v ...
- bzoj 2337 [HNOI2011]XOR和路径【高斯消元+dp】
首先,我们发现,因为是无向图,所以相连的点之间是有"依赖性"的,所以不能直接用dp求解. 因为是xor,所以按位处理,于是列线性方程组,设$ x[i] $为点i到n异或和为1的期望 ...
- Luogu P2920 时间管理【二分答案】
二分答案水题. (像我这么蒻的人都能十几分钟A掉) https://www.luogu.org/problemnew/show/P2920 开始时间一定在从0到min(t[i]-s[i])的一段区间上 ...
- shiro之SimpleAccountRealm
我使用的是maven构建的工程,junit测试 Shiro认证过程 创建SecurityManager--->主体提交认证--->SecurityManager认证--->Authe ...
- Microsoft函数调用约定
Microsoft函数调用约定 对于所有调用共有的约定:ebx.ebp.esi.edi都是calle-save,即由被调用的函数负责它们的保存(如果被调用函数用到了这些寄存器的话) 先看函数调用发生了 ...
- SQL 实战教程(八)
http://www.studyofnet.com/news/247.html 1.修改字段为自增 alter table [dbo].[Logs] drop column ID alter tabl ...
- [SHOI2002]取石子游戏之三
Wythoff's Game,详解请见浅谈算法--博弈论中的例6 /*program from Wolfycz*/ #include<cmath> #include<cstdio&g ...