<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>长沙我心飞扬seo &#187; js控制图片宽度</title>
	<atom:link href="http://www.wxfy.net/tag/js%e6%8e%a7%e5%88%b6%e5%9b%be%e7%89%87%e5%ae%bd%e5%ba%a6/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.wxfy.net</link>
	<description>长沙seo,长沙网站建设,长沙网站优化首选我心飞扬seo</description>
	<lastBuildDate>Thu, 09 Sep 2010 07:42:35 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>如何解决图片过大撑破网页？</title>
		<link>http://www.wxfy.net/make-pics-in-webpage/</link>
		<comments>http://www.wxfy.net/make-pics-in-webpage/#comments</comments>
		<pubDate>Mon, 12 Oct 2009 09:13:03 +0000</pubDate>
		<dc:creator>阿非</dc:creator>
				<category><![CDATA[Css]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[网站建设]]></category>
		<category><![CDATA[css图片宽度]]></category>
		<category><![CDATA[css控制图片宽度]]></category>
		<category><![CDATA[js图片宽度]]></category>
		<category><![CDATA[js控制图片宽度]]></category>
		<category><![CDATA[图片过大]]></category>
		<category><![CDATA[撑破网页]]></category>

		<guid isPermaLink="false">http://www.wxfy.net/?p=12</guid>
		<description><![CDATA[如何解决图片过大撑破网页？一般解决方法运用css定义图片样式或者js控制图片。
很多时候图片没编辑直接用于网上的话有可能会出现图片撑破网页，css控制overflow:hidden的话，多出的图片会隐藏，因此最好的方法是当图片超过一定宽度的时候给它一个宽度，让图片等比例压缩。那么究竟如何解决图片过大撑破网页呢？
除IE6及以下版本浏览器外：
其他浏览器一般可以用下面这种方法实现：img{maxwidth:600px}，这个意思是图片的最大宽度是600像素，这种方法IE6不支持，优点是实现很简单，不需要等图片下载完之后才能控制，因为CSS先下载完。
能兼容IE6的方法：

1.在img标签中使用“ onload=&#8221;if(this.width&#62;600)this.width=600&#8243; ”这样子的属性就可以在ie下控制图片的最大宽度，缺点是必须等图片载入后这个onload才会起作用。
2.在css中定义img {max-width: 600px; width:expression(this.width &#62; 600 ? &#8220;600px&#8221; : this.width)}，因为ie6支持expression，不过似乎比较占用资源。
3.使用 JavaScript 调整
一般情况下大多数人会使用 JavaScript，但脚本只能在页面装载完成之后执行，网络状况不太好的话，需要加载很长一段时间才能轮到脚本执行，用户体验较差；另外，如果用户关闭了浏览器的 JavaScript 支持，这个方法也就失效了。这里提供一个，貌似管用..
&#60;script type=&#8221;text/javascript&#8221;&#62;
window.onload = function() {
for (var index = 0; index &#60;document.images.length; index++) {
var maxWidth = 600;
if (document.images[index].width&#62; maxWidth) {
document.images[index].width = maxWidth;
}
}
}
&#60;/script&#62;
&#60;script type=&#8221;text/javascript&#8221;&#62;
window.onload = function() {
for (var index = 0; index &#60;document.images.length; index++) {
var maxWidth = 600;
if (document.images[index].width&#62; maxWidth) {
document.images[index].width [...]]]></description>
			<content:encoded><![CDATA[<p><strong>如何解决图片过大撑破网页？</strong>一般解决方法运用css定义图片样式或者js控制图片。</p>
<p>很多时候图片没编辑直接用于网上的话有可能会出现图片撑破网页，css控制overflow:hidden的话，多出的图片会隐藏，因此最好的方法是当图片超过一定宽度的时候给它一个宽度，让图片等比例压缩。那么究竟<strong>如何解决图片过大撑破网页呢？</strong></p>
<p><strong>除IE6及以下版本浏览器外：</strong></p>
<p>其他浏览器一般可以用下面这种方法实现：img{maxwidth:600px}，这个意思是图片的最大宽度是600像素，这种方法IE6不支持，优点是实现很简单，不需要等图片下载完之后才能控制，因为CSS先下载完。</p>
<p><strong>能兼容IE6的方法：<span id="more-12"></span><br />
</strong></p>
<p>1.在<img alt="" />img标签中使用“ onload=&#8221;if(this.width&gt;600)this.width=600&#8243; ”这样子的属性就可以在ie下控制图片的最大宽度，缺点是必须等图片载入后这个onload才会起作用。</p>
<p>2.在css中定义img {max-width: 600px; width:expression(this.width &gt; 600 ? &#8220;600px&#8221; : this.width)}，因为ie6支持expression，不过似乎比较占用资源。</p>
<p>3.使用 JavaScript 调整<br />
一般情况下大多数人会使用 JavaScript，但脚本只能在页面装载完成之后执行，网络状况不太好的话，需要加载很长一段时间才能轮到脚本执行，用户体验较差；另外，如果用户关闭了浏览器的 JavaScript 支持，这个方法也就失效了。这里提供一个，貌似管用..</p>
<blockquote><p>&lt;script type=&#8221;text/javascript&#8221;&gt;</p>
<p>window.onload = function() {</p>
<p>for (var index = 0; index &lt;document.images.length; index++) {</p>
<p>var maxWidth = 600;</p>
<p>if (document.images[index].width&gt; maxWidth) {</p>
<p>document.images[index].width = maxWidth;</p>
<p>}</p>
<p>}</p>
<p>}</p>
<p>&lt;/script&gt;</p></blockquote>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 184px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">&lt;script type=&#8221;text/javascript&#8221;&gt;</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 184px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">window.onload = function() {</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 184px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">for (var index = 0; index &lt;document.images.length; index++) {</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 184px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">var maxWidth = 600;</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 184px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">if (document.images[index].width&gt; maxWidth) {</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 184px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">document.images[index].width = maxWidth;</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 184px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">}</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 184px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">}</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 184px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">}</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 184px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">&lt;/script&gt;</div>
]]></content:encoded>
			<wfw:commentRss>http://www.wxfy.net/make-pics-in-webpage/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
