css控制div下图片自适应解决方法:图片不超过最大宽度
我们（特别是像我一样的菜鸟）经常会遇到一个问题——图片自适应。这个问题是很普遍的。在文章区，在论坛，可以这么说：哪儿需要上传图片，哪儿就存在这个问题，而论坛上也不时有人询问。为什么？原因很简单，我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的html代码——尽管这并没有多少技术含量。
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。 下面的办法的出现应该感谢伟大的css2.0和更伟大的microsoft（没有它就不必有这么啰嗦的代码了^_^）。本人仅在ie6.0,ff1.5, opera7.0于winXP下测试通过，希望通过此篇文章抛砖引玉，望更多高手指点。关键在于：max-width:780px;以及下面那行。
固定像素适应:
运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css2.0 VS ie</title> <style type="text/css"> <!-- body { font-size: 12px; text-align: center; margin: 0px; padding: 0px; } #pic{ margin:0 auto; width:800px; padding:0; border:1px solid #333; } #pic img{ max-width:780px; width:(document.body.clientWidth > 780? "780px": "auto" ); border:1px dashed #000; } --> </style> </head> <body> <div id="pic"> <img src="http://edu.han123.net/UploadFiles_edu/200701/20070115190431983.jpg" alt="感谢blueidea被我盗链图片！"/> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
百分比适应:
运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css2.0 VS ie</title> <style type="text/css"> <!-- body { font-size: 12px; text-align: center; margin: 0; padding: 0; } #pic{ margin:0 auto; width:90%; padding:0; border:1px solid #333; } #pic img{ max-width:80%; width:(document.body.clientWidth>document.getElementById("pic").scrollWidth*8/10? "80%": "auto" ); border:1px dashed #000; } --> </style> </head> <body> <div id="pic"> <img src="http://edu.han123.net/UploadFiles_edu/200701/20070115190431983.jpg" alt="感谢blueidea被我盗链图片！"/> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
提醒:
1 该方法不只是用于img; 2 max-width,max-height,min-width,min-height.
CSS中expression使用简介 作者：dozb
定义
IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。
给元素固有属性赋值
例如，你可以依照浏览器的大小来安置一个元素的位置。
#myDiv { position: absolute; width: 100px; height: 100px; left: expression(document.body.offsetWidth - 110 + "px"); top: expression(document.body.offsetHeight - 110 + "px"); background: red; }
给元素自定义属性赋值
例如，消除页面上的链接虚线框。
通常的做法是：
<a href="link1.htm" onfocus="this.blur()">link1</a> <a href="link2.htm" onfocus="this.blur()">link2</a> <a href="link3.htm" onfocus="this.blur()">link3</a>
粗看或许还体现不出采用expression的优势，但如果你的页面上有几十甚至上百个链接，这时的你难道还会机械式地Ctrl+C，Ctrl+V么，何况两者一比较，哪个产生的冗余代码更多呢？
采用expression的做法如下：
<style type="text/css"> a {star : expression(onfocus=this.blur)} </style> <a href="link1.htm">link1</a> <a href="link2.htm">link2</a> <a href="link3.htm">link3</a>
说明：
里面的star就是自己任意定义的属性，你可以随自己喜好另外定义，接着包含在expression()里的语句就是JS脚本，在自定义属性与 expression之间可别忘了还有一个引号，因为实质还是CSS，所以放在style标签内，而非script内。OK，这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意，如果触发的特效是CSS的属性变化，那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改，你可能想当然的会认为应该写为 /* 原文有乱码,没时间修正,抱歉!*/ 可结果却是出现脚本出错，正确的写法应该把CSS样式的定义写进函数内，如下所示：
<style type="text/css"> input {star : expression(onmouseover=function() {this.style.backgroundColor="#FF0000"}, onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) } </style> <input type="text"> <input type="text"> <input type="text">
注意:
不是非常需要，一般不建议使用expression，因为expression对浏览器资源要求比较高
css控制div下图片自适应解决方法:图片不超过最大宽度的更多相关文章
- 用CSS控制DIV居中失效的解决方法
1.一般情况下DIV居中失效是因为没写DTD语句 在页面的最上方加上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- 简单两步使用css控制div下导航栏ul居中显示
第一步:父层设置文本居中属性 ul{ text-align:center; } 第二步:li设置内联样式 li{ display:inline; } PS 只需以上两步就可以实现导航栏居中显示了,但为 ...
- css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- dedecms织梦手机端文章内容页图片不能自适应解决方法
dedecms织梦手机端文章内容页图片不能自适应解决方法: 方法一修改手机端文章页模板代码: 找到并打开手机端的文章内容页模板,将里面的{dede:field.body/}标签修改一下,改为如下的标签 ...
- PNG24在ie6下的完美解决方法!(DD_belatedPNG)
原网址:http://www.zjgsq.com/1629.html 之前写过一篇<js+css滤镜设置解决PNG24在IE6下显示问题> 解决方法不是很完美,使用起来也比较麻烦. DD_ ...
- css控制div的各种形状
css控制div的各种形状 CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用. 以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可 ...
- 使用webstrom开发react-native时react-native代码会出现红色下划线的解决方法
问题:使用webstrom开发react-native时react-native代码会出现红色下划线的解决方法 解决方法:webstrom ->preferences->Laugrange ...
- 纯CSS实现Div高度根据自适应宽度（百分百调整）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- ArcGIS帮助文档VS帮助文档不能复制图片的解决方法
ArcGIS帮助文档VS帮助文档不能复制图片的解决方法(非常有用) 问题:ArcGIS的学习文档,开发文档,vs的帮助文档,一般都不能复制图片,有的甚至不能复制文本. 解决方法 在文档空白处右 ...
随机推荐
- 编写基本的 udev 规则
来自: https://linux.cn/article-9365-1.html?utm_source=index&utm_medium=more 读者对象 理解 udev 背后的基本概念,学 ...
- Which HTTP methods match up to which CRUD methods?
https://stackoverflow.com/questions/6203231/which-http-methods-match-up-to-which-crud-methods Crea ...
- Kubernetes源码之旅：从kubectl到API Server
概述: Kubernetes项目目前依然延续着之前爆炸式的扩张.急需能够理解Kubernetes原理并且贡献代码的软件开发者.学习Kubernetes源码并不容易.Kubernetes是使用相对年轻的 ...
- mysql升级的一些踩坑点
升级的方法一般有两类: 1.利用mysqldump来直接导出sql文件,导入到新库中,这种方法最省事也最保险 缺点:大库的mysqldump费时费力. 2.直接替换掉 mysql 的安装目录和 my. ...
- js的onclick字符串参数的解决办法
<a href='#' onclick='onedit(\""+ name + "\")';>编辑</a>" 一些写法实例~~ ...
- 【Python】序列的方法
任何序列都可以引用其中的元素(item). 下面的内建函数(built-in function)可用于列表(表,定值表,字符串) #s为一个序列 len(s) 返回: 序列中包含元素的个数 min(s ...
- 【scala】应用程序和App特性
一.应用程序 要运行一个Scala对象,必须提供一个独立对象的名称.这个独立对象需要包含一个main方法,该方法接受一个Array[String]作为参数,结果类型为Unit. import Chec ...
- hdu4715
题解: 二分图判断 建立原图的补图 判断是否是二分图 代码: #include<cstdio> #include<cmath> #include<cstring> ...
- python基础之模块一
一 time模块 时间表示形式 在Python中,通常有这三种方式来表示时间:时间戳.元组(struct_time).格式化的时间字符串:(1)时间戳(timestamp) :通常来说,时间戳表示的是 ...
- Spring Batch教程
Spring Batch系列总括 : http://www.cnblogs.com/gulvzhe/archive/2011/12/20/2295090.html