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:expression(document.body.clientWidth > 780? "780px": "auto" ); border:1px dashed #000; } --> </style> </head> <body> <div id="pic"> <img src="/articleimg/2006/03/3297/koreaad_10020.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:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*8/10? "80%": "auto" ); border:1px dashed #000; } --> </style> </head> <body> <div id="pic"> <img src="/articleimg/2006/03/3297/koreaad_10020.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" οnfοcus="this.blur()">link1</a>
<a href="link2.htm" οnfοcus="this.blur()">link2</a>
<a href="link3.htm" οnfοcus="this.blur()">link3</a>
粗看或许还体现不出采用expression的优势,但如果你的页面上有几十甚至上百个链接,这时的你难道还会机械式地Ctrl+C,Ctrl+V么,何况两者一比较,哪个产生的冗余代码更多呢?
采用expression的做法如下:  
<style type="text/css">
a {star : expression(οnfοcus=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(οnmοuseοver=function()
{this.style.backgroundColor="#FF0000"},
οnmοuseοut=function(){this.style.backgroundColor="#FFFFFF"}) }
</style>
<input type="text">
<input type="text">
<input type="text">
注意:
不是非常需要,一般不建议使用expression,因为expression对浏览器资源要求比较高

转载于:https://www.cnblogs.com/top5/archive/2011/10/05/2199561.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/495301.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows 远程执行 cmd 命令的 9 种方法

一、远程执行命令方式及对应端口:  IPC$AT 445  PSEXEC 445  WMI 135  Winrm 5985(HTTP)&5986(HTTPS) 二、9种远程执行cmd命令的方法&#xff1a; 1.WMI执行命令方式,无回显&#xff1a; wmic /node:192.168.1.158 /user:pt007 /password:admin123 process call …

不要指望未来科学的发展会改变元素周期表的形式

来源&#xff1a;陈敏伯科学网博客摘要&#xff1a;对于自然界的许多规律&#xff0c;哪怕我们对其物理具体内容还不知道、实验证据还不足&#xff0c;但是可以单凭问题中明显可见的对称性质&#xff0c;就可以从理论上演绎出一些重要结论。很长时间以来&#xff0c;化学界关于…

CSS教程--CSS背景

CSS 允许应用纯色作为背景&#xff0c;也允许使用背景图像创建相当复杂的效果。 CSS 在这方面的能力远远在 HTML 之上。 背景色 可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。 这条规则把元素的背景设置为灰色&#xff1a; p {background-c…

Appium 简明教程

转载&#xff1a;Appium 简明教程&#xff1a;http://www.testclass.net/appium https://www.cnblogs.com/fnng/p/4540731.html Appium 官网&#xff1a;http://appium.io/ Github 地址&#xff1a;https://github.com/appium/appium 主要包括以下几部分&#xff1a; appium新…

陈俊龙:从深度强化学习到宽度强化学习—结构,算法,机遇及挑战

来源&#xff1a;AI科技评论摘要&#xff1a;如何赋予机器自主学习的能力&#xff0c;一直是人工智能领域的研究热点。强化学习与宽度学习如何赋予机器自主学习的能力&#xff0c;一直是人工智能领域的研究热点。在越来越多的复杂现实场景任务中&#xff0c;需要利用深度学习、…

Web.Config文件配置之数据库连接配置

Web.Config文件以XML形式存在于ASP.NET应用程序中&#xff0c;是ASP.NET应用程序的配置文件&#xff0c;包含程序调试、会话和全球化设置等配置信息&#xff0c;可以直接用记事本打开进行编辑。下面通过实例说明如何配置Web.Config文件。 一、配置Access数据库连接 Access数据库…

pyspider 安装 和 快速开始

From&#xff1a;官方文档 --- 快速开始&#xff1a;http://docs.pyspider.org/en/latest/Quickstart/ pyspider github 地址&#xff1a;https://github.com/binux/pyspider pyspider 官方文档&#xff1a;http://docs.pyspider.org/en/latest/ 爬虫框架 pyspider个人总结&…

【干货】强化学习介绍

作者 | Thomas Simonini编译 | 专知整理 | Yongxi摘要&#xff1a;由于Alpha Go的成功&#xff0c;强化学习始终是人们谈论的焦点。现在Thomas Simonini在国外blog网站上发布了系列强化学习教程&#xff0c;以下是本系列的第一篇&#xff0c;简单介绍了强化学习的基本概念。An …

[VBA] 设置行高和列宽,以及全选单元格

一、用VBA设置行高和列宽 1、将选定区域内各单元格的行高和列宽设置为指定的数值&#xff1a; Sub SetSpecified()With ActiveWindow.RangeSelection.ColumnWidth 2.RowHeight 10End With End Sub2、将选定区域内各单元格的行高和列宽调整为最合适的值&#xff1a; Sub…

爬虫教程( 2 ) --- 爬虫框架 Scrapy、Scrapy 实战

From&#xff1a;https://piaosanlang.gitbooks.io/spiders/content/ scrapy-cookbook &#xff1a;https://scrapy-cookbook.readthedocs.io/zh_CN/latest/index.html 1. 爬虫框架 Scrapy 爬虫框架中比较好用的是 Scrapy 和 PySpider。 PySpider 优点&#xff1a;分布式框架&a…

传粉飞行器是拯救传粉昆虫危机的利器还是毁灭者

来源&#xff1a;陈华燕的科学网博客摘要&#xff1a;近年来科学家陆续发现&#xff0c;传粉昆虫正在面临着重重危机&#xff0c;至少在欧洲和北美已发现传粉昆虫的数量正在逐渐下降。近年来科学家陆续发现&#xff0c;传粉昆虫正在面临着重重危机&#xff0c;至少在欧洲和北美…

字符串比较函数实现,超简单的面试题,回过头来发现原来我的c多么的薄弱

今天某个公司面试&#xff0c;尽管报了个测试类的&#xff0c;但是面试依旧不给力&#xff0c;先是写个字符串比较函数&#xff0c;只判断相等和不相等的情况&#xff0c;当时大概这么写的&#xff1a; #include<stdio.h>bool strCompare(char *str1,char *str2){char *s…

思略特报告解读:智能制造企业如何实现数字化?

来源&#xff1a;亿欧智库摘要&#xff1a;全球制造业已经将数字化运营或者工业4.0提上日程&#xff0c;基于此&#xff0c;思略特调研了1100多为企业高管&#xff0c;了解他们对数字化的看法。根据调研&#xff0c;总结了四大业务生态体系&#xff1a;客户解决方案体系、运营体…

爬虫教程( 4 ) --- 分布式爬虫 scrapy-redis、集群

1、分布式爬虫 scrapy - redis scrapy 分布式爬虫 文档&#xff1a;http://doc.scrapy.org/en/master/topics/practices.html#distributed-crawls Scrapy 并没有提供内置的机制支持分布式(多服务器)爬取。不过还是有办法进行分布式爬取&#xff0c; 取决于您要怎么分布了。 …

京东计划狂招2万人

京东明年招聘2万人&#xff0c;招聘人数是现有7000名员工的近三倍&#xff0c;比百度和腾讯的员工总和还多●京东王恩斌透露&#xff0c;除了技术人才与后备人才外&#xff0c;招聘的很大部分是物流配送人才●京东将在成都、北京、上海、广州自购土地建仓库&#xff0c;成都仓库…

爬虫教程( 5 ) --- Selenium 与 PhantomJS

1. Selenium 中式读法&#xff1a;【 瑟林捏幕 】 Selenium&#xff08; selenium 中文网&#xff1a;http://www.selenium.org.cn/ &#xff09;是一个强大的网络数据采集工具&#xff0c;最初是为了网站自动化测试而开发的&#xff0c;被用来测试 Web 应用程序在不同的浏览器…

详解深度学习的可解释性研究(上篇)

作者 | 王小贱来源 | BIGSCity知乎专栏摘要&#xff1a;《深度学习的可解释性研究》系列文章希望能用尽可能浅显的语言带领大家了解可解释性的概念与方法&#xff0c;以及关于深度学习可解释性工作的研究成果。本文是该系列的第一部分。01深度学习的可解释性研究&#xff08;一…

Office 安装

Office Tool Plus 官网&#xff1a;https://otp.landian.vip/zh-cn/ &#xff1a;https://zhuanlan.zhihu.com/p/486882686 Office Tool Plus 基于 Office 部署工具 (ODT) 打造&#xff0c;可以很轻松地部署 Office。无论你是个体还是团队&#xff0c;Office Tool Plus 都是您…

前瞻性总结:全球未来十年不可不知的10大趋势

来源&#xff1a;混沌大学摘要&#xff1a;无论你身在何处&#xff0c;真正的大趋势必将把地球上每一个人深卷其中&#xff0c;并重构大至国家、城市&#xff0c;小至企业、消费者之间一系列错综复杂的关系。不管你是处于创业模式&#xff0c;还是在大企业里面工作&#xff0c;…

C++ 之 转义字符

反斜杠“\”称为转义字符&#xff0c;该字符并不表示本身&#xff0c;用于在程序中表示那些很难或不能显示的字符&#xff0c;例如如果想要表示字符“\”本身&#xff0c;则应该连续用两个反斜杠。 又例如你想打印输出:hello,"world!" 就不能用 cout<<"he…