纯CSS实现图片等比缩放兼容IE6/IE7/火狐/谷歌

纯CSS实现图片等比缩放兼容IE6/IE7/火狐/谷歌
为防止页面图片过大将页面撑开，或是防止图片缩放时变形难看，可以使用以下css样式来控制。

CSS代码如下：
<style type=”text/css”>
img{max-width:100px!important; width:100px!important; width:expression(document.body.clientWidth>100"100px":"auto")!important; overflow:hidden}
< /style>

HTML代码如下：
<div>
<p><img src=”abc.jpg” alt=”**”></p>
< p><img src=”abc.jpg” alt=”**”></p>
< /div>

在页面上图片会自动按比例缩小，此代码兼容：IE6、7、8、FF。

解释：
max-width:100px —— IE7、FF等其他非IE浏览器下最大宽度为100px;
width:100px —— 所有浏览器中图片的大小为100px;
expression(...) —— 当图片大小大于100px，自动缩小为100px;
overflow:hidden —— 溢出的图片内容将被隐藏
!important —— 作用是提高指定样式规则的应用优先权。

expression只能应用在ie中，而且是非标准的用法，也有安全问题。不建议使用

另一个代码如下：
< !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>纯CSS实现图片等比缩放兼容IE6/IE7/火狐/谷歌_懒人建站</title>
< style type="text/css">
.suofang {MARGIN: auto;WIDTH: 800px;}
.suofang img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 800 ? "800px" : this.width)!important;}
< /style>
< /head>
< body>
< div class="suofang">
< img src="http://www.51xuediannao.com/uploads/jiqiao/csssuofang/blogbus.png"/>
< /div>
< /body>
< /html>

CSS控制图片防止撑破页面[图片等比缩放]

为防止页面图片过大将页面撑开，可以使用以下css样式来控制。
代码如下：
<style type=”text/css”>
.content_width {MARGIN: auto;WIDTH: 600px;}
.content_width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? “600px” : this.width)!important;}
</style>
HTML代码如下：
<div class=”content_width”>
<p><img src=”/../***.jpg” alt=”**”></p>
<p><img src=”/../***.jpg” alt=”**”></p>
</div>
在页面上图片会自动按比例缩小，此代码兼容：IE6、7、8、FF。