[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实现网页背景图片自适应全屏
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
随机推荐
- AutoIT: 如何从excel中取值并判断条件?
#include <Excel.au3> $excel = _ExcelBookAttach("Book1.xlsx" ,"FileName") ; ...
- bzoj2809 [Apio2012]dispatching——左偏树(可并堆)
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2809 思路有点暴力和贪心,就是 dfs 枚举每个点作为管理者: 当然它的子树中派遣出去的忍者 ...
- Linux系统调用之open(), close() (转载)
转自:http://joe.is-programmer.com/posts/17463.html open函数可以打开或创建一个文件. #include <sys/types.h> #in ...
- bzoj 1600: [Usaco2008 Oct]建造栅栏【dp】
要求三边和大于第四边,所以任意一条边的长度都是小于n/2 设f[i][j]为前i条长为j,转移的时候用n/2限制 #include<iostream> #include<cstdio ...
- bzoj 4827: [Hnoi2017]礼物【FFT】
记得FFT要开大数组!!开到快MLE的那种!!我这个就是例子TAT,5e5都RE了 在这题上花的时间太多了,还是FFT不太熟练. 首先看70分的n方做法:从0下标开始存,先n--,把a数组倍增,然后枚 ...
- 矩阵快速幂/矩阵加速线性数列 By cellur925
讲快速幂的时候就提到矩阵快速幂了啊,知道是个好东西,但是因为当时太蒟(现在依然)没听懂.现在把它补上. 一.矩阵快速幂 首先我们来说说矩阵.在计算机中,矩阵通常都是用二维数组来存的.矩阵加减法比较简单 ...
- 递归查找无效的符号链接 分类: linux c/c++ 2014-06-02 00:14 345人阅读 评论(0) 收藏
本程序实现在指定目录下递归查找无效的符号链接. 1.设计思路 逐个读取给定目录中的目录项,判断类型 (1)若为目录,则读取该目录中的目录项并判断类型: (2)若为链接文件,则读取出其指向文件的名称(绝 ...
- Service官方教程(8)Bound Service示例之2-跨进程使用Messenger
Compared to AIDL When you need to perform IPC, using a Messenger for your interface is simpler than ...
- Service官方教程(2)*IntentService与Service示例、onStartCommand()3个返回值的含义。
1.Creating a Started Service A started service is one that another component starts by calling start ...
- Android偏好设置(3)启动偏好设置后显示的界面PreferenceActivity和PreferenceFragment
Creating a Preference Activity To display your settings in an activity, extend the PreferenceActivit ...