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控制图片大小显示的方法
图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 可以通过按比例缩小或者放大到某尺寸(自己指定), ...
- [css或js控制图片自适应]
[css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...
- FE: CSS固定图片显示大小及GitHub Pages在线演示
CSS固定图片显示大小 分析 假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; marg ...
- CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...
- CSS控制图片大小
转载请注明来源:https://www.cnblogs.com/hookjc/ 1.CSS控制背景图片: 对于一个网页,我们开始设计的时候,可能没有过多的去想背景图到底是什么,因为大多都是设计背 ...
- iOS HTML 字符串中的图片 自适应大小
本文原文地址:http://www.cnblogs.com/qianLL/p/6095988.html 有时候 我们接收数据的时候 后台给的数据室一串HTML 的字符串 但是 我们要显示出来 这 ...
- 一行css解决图片统一大小后的拉伸问题(被冷漠的object-fit)
一.先来个实战 1. 测试案例 需求: 要求表情库里所有表情包大小都固定 实际效果: 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐.例如: //html <bod ...
- CSS控制图片显示区域
优化页面响应速度,减少页面向服务端请求图片次数,有时候可能会将多个小图合并到一张图中,用的时候通过css控制显示的区域,比如:上传一张人物图片到服务器检测人脸,最后在页面上列出所有识别出来的人脸,实现 ...
- css 背景图片自适应元素大小
一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...
随机推荐
- RPi 2B Android telnet ssh
/*********************************************************************** * RPi 2B Android telnet ssh ...
- Mybatis学习——传递Map型参数
Spring整合Mybatis调用 public boolean editItemSales(int i_id, int i_sales) { Map<String, Object> ma ...
- Hadoop 学习总结之一:HDFS简介
一.HDFS的基本概念 1.1.数据块(block) HDFS(Hadoop Distributed File System)默认的最基本的存储单位是64M的数据块. 和普通文件系统相同的是,HDFS ...
- Hadoop Hive基础sql语法
目录 Hive 是基于Hadoop 构建的一套数据仓库分析系统,它提供了丰富的SQL查询方式来分析存储在Hadoop 分布式文件系统中的数据,可以将结构 化的数据文件映射为一张数据库表,并提供完整的 ...
- JQuery Mobile实现手机新闻浏览器(2)
在上一篇文章中,已经讨论了程序的结构和页面的布局,并简单介绍了一些jQuery Mobile的使用技巧.在本篇文章中,笔者将继续完成我们web应用的新闻浏览器的设计. 程序的启动 我们现在来研究一下程 ...
- php5.2转向 PHP 5.3 的 PHP 开发
PHP 5.3 开始,为了更好的向 PHP 的未来版本(PHP6) 过渡,将未来不再支持的函数标记为 DEPRECATED.在代码中使用这些函数,将毫不留情的在页面中显示警告信息:“使用了过时的函数… ...
- 约瑟夫环 --- 面向对象 --- java代码
约瑟夫环 的 面向对象 解法 罗马人占领乔塔帕特后,39个犹太人与Josephus及他的朋友躲到一个洞中,39个犹太人决定宁愿死也不要被敌人抓到,于是决定了一个自杀方式,41个人排成一个圆圈,由第1个 ...
- 转来的 cuda makefile 写法学习
原文作者:FreeAquar 原文出处:http://www.cnblogs.com/FreeAquar/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...
- python程序中自启动appium服务
普通启动Appium服务方法: 打开cmd,运行命令: #>appium -a 127.0.0.1 -p 4723 当程序输出如上图信息的时候,表示appium启动成功,此时便可以运行 ...
- VS2013 调试MVC源码[MVC5.2.3+MVC4Web项目]
1.目前MVC源码版本为5.2.3,下回来后用VS2013打开,把System.Web.Mvc项目的版本号改为4.0.0.1 2.在解决方案下建一个MVC4项目,.NET选4.5,修改根目录以及Vie ...