CSS强制图片大小
相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决。
该CSS的功能是:大于600的图片自动调整为600显示。
<style type="text/css">
<!--
img {width:expression(this.width>600?"600px":this.width+"px");}
}
-->
</style>
上面的代码在使用的过程中发现第一次打开页面时图片会缩到很小,需要刷新页面才能实达所设置的大小,故又找到了以下代码:
img{
max-height:720px;
max-width:640px;
width:expression(this.width > 640 && this.height < this.width ? 640: true);
height:expression(this.height > 720 ? 720: true);
}
经测试是可以解决图片自适应大小的问题了。
另一种方法是让图片自适应DIV及table的大小:
先定义一个JAVA函数
<script type="text/javascript" >
function ReImgSize(){
for (j=0;j<document.images.length;j++)
{
document.images[j].width=(document.images[j].width>420)?"420":document.images[j].width;
}
}
</script>
然后在body区域加上onload="ReImgSize()" 就可以了。
顺道说一下:
Mozilla支持一个max-width 的CSS语法。于是我们这样这样定义图片的全局样式。
img{
max-width:100%;height:auto;
}
这样图片就回在div或table内自动适应其大小了.
CSS强制图片大小的更多相关文章
- CSS自动控制图片大小的代码
img { max-width: 800px; height: auto; } 代码中的max-width:800px限制图片的最大宽度为800像素,而下面的hight:auto很关键,可以保证图片有 ...
- 用CSS控制图片大小显示的方法
图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 可以通过按比例缩小或者放大到某尺寸(自己指定), ...
- CSS控制图片大小
转载请注明来源:https://www.cnblogs.com/hookjc/ 1.CSS控制背景图片: 对于一个网页,我们开始设计的时候,可能没有过多的去想背景图到底是什么,因为大多都是设计背 ...
- css限制图片大小,避免页面撑爆
/*==========限制图片大小======避免页面撑暴========*/img { max-width:100%;width:expression(width>669?"100 ...
- mui-图文列表 图片大小问题
下面是源码,不能调节图片大小 <ul class="mui-table-view"> <li class="mui-table-view-cell mu ...
- 实现图片大小的自动控制( 图片大小控制CSS代码)
图片大小控制CSS代码 将以下代码放到你的样式表文件中即可实现图片大小的自动控制. /*图片大小控制CSS By Tekin */img,a img{border:0;margin:0;padding ...
- FE: CSS固定图片显示大小及GitHub Pages在线演示
CSS固定图片显示大小 分析 假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; marg ...
- Css Sprite 图片等比缩放图片大小
图片大小80*40,即每张图片大小40*40,如何以20*20显示图片?1. 首先看下如何以40*40显示第二张图片: 正常显示css代码 .sprite { background-image: ur ...
- div css 伪类 不固定图片大小 居中, css div 实现三角形
div css 伪类 不固定图片大小 居中 <style> .pic_box{width:300px; height:300px; background-color:#beceeb; fo ...
随机推荐
- UOJ #78 二分图最大匹配
#78. 二分图最大匹配 从前一个和谐的班级,有 nl 个是男生,有 nr 个是女生.编号分别为 1,…,nl 和 1,…,nr. 有若干个这样的条件:第 v 个男生和第 u 个女生愿意结为配偶. 请 ...
- R语言笔记
R语言笔记 学习R语言对我来说有好几个地方需要注意的,我觉得这样的经验也适用于学习其他的新的语言. 语言的目标 我理解语言的目标就是这个语言是用来做什么的,为什么样的任务服务的,也就是设计这个语言的动 ...
- 01背包之求第K优解——Bone Collector II
http://acm.hdu.edu.cn/showproblem.php?pid=2639 题目大意是,往背包里赛骨头,求第K优解,在普通01背包的基础上,增加一维空间,那么F[i,v,k]可以理解 ...
- Eclipse无法设置NDK路径的解决方法
如果在Eclipse中设置NDK路径的时候遇到下面的情况(尼玛,我的NDK设置呢?): 可以参考百度经验解决:http://jingyan.baidu.com/article/4d58d5413000 ...
- fedorea19安装redis
Redis 安装: $ wget http://redis.googlecode.com/files/redis-2.4.5.tar.gz $ tar xzf redis-2.4.5.tar.gz $ ...
- Oracle Dataguard三种保护模式
Oracle Dataguard提供了三种数据保护模式,在此分别总结一下三种数据保护模式的特点. 1.最大保护模式1)这种模式提供了最高级别的数据保护能力:2)要求至少一个物理备库收到重做日志后,主库 ...
- 深入理解java的异常处理机制
JAVA异常的概念 异常指不期而至的各种状况,如:文件找不到.网络连接失败.非法参数等.异常是一个事件,它发生在程序运行期间,干扰了正常的指令流程.Java通 过API中Throwable类的 ...
- 从APP消息推送所理解的观察者模式
#1.什么是观察者模式? 观察者模式=(出版者+订阅者)模式,观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能 ...
- jQuery(二)
jQuery学完了!好用! 1.用定时器做的jquery里面的animate效果 <!DOCTYPE html> <html lang="en"> < ...
- db2 存储过程迁移方法
大家在迁移数据库时,存储过程一般也要迁移过去,但一般有两个问题: 1. 非常多存储过程有先后关系(存储过程调用存储过程),假设存储过程数量少,还能手动操作.假设量大,那真是要疯了. 2. 存储过程过大 ...