關鍵詞：css控制圖片 等比例縮放 兼容IE6/IE7/火狐/谷歌
css控制圖片按等比例縮放 兼容IE6/IE7/火狐/谷歌
今天自己的一個網站需要實現圖片等比例縮放，但又不能使用js只能用css控制div中的img為指定大小，下面我找到一段代碼分離給大家。
代碼如下:
<style type="text/css">
.thumbImage img{
MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;
}
.thumbImage {MARGIN: auto;WIDTH: 600px;}
*html.thumbImage img{
width:expression(this.width>600&&this.width>this.height?450:auto);
height:expresion(this.height>450?450:auto);
}
</style>
html代碼代碼如下：
<body>
<DIV class="thumbImage" ><img src="1.jpg" border="0"></DIV>
</body>
這樣只要在 class中thumbImage圖片都會等比例縮放哦，小了就原始顯示大的就等比例縮小。按比例縮小或者放大到某個尺寸，對于標準瀏覽器（如Firefox），或者最新都IE7,ie8瀏覽器，直接使用max-width,max-height；或者min-width,min-height的CSS屬性即可。
對于IE6及其以下版本的瀏覽器，則可以利用其支持的expression屬性，在css code中嵌入javascript code來實現圖片的縮放。
|
