css控制圖片按等比例縮放實例兼容IE6/IE7/火狐/谷歌

2024-07-11 08:29:17

字體：大中小

供稿：網(wǎng)友

昨天自己的一個網(wǎng)站需要實現(xiàn)圖片等比例縮放，但又不能使用js只能用css控制div中的img為指定大小，下面我找到一段代碼分離給大家。

復(fù)制代碼

代碼如下:
<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代碼代碼如下

復(fù)制代碼

代碼如下:
<body>
<DIV class="thumbImage" ><img src="2007910112041114.jpg" border="0"></DIV>
</body>

這樣只要在 class中thumbImage圖片都會等比例縮放哦，小了就原始顯示大的就等比例縮小。

按比例縮小或者放大到某個尺寸，對于標(biāo)準(zhǔn)瀏覽器（如Firefox），或者最新都IE7,ie8瀏覽器，
直接使用max-width,max-height；或者min-width,min-height的CSS屬性即可。如：

復(fù)制代碼

代碼如下:
img{max-width:100px;max-height:100px;}
img{min-width:100px;min-height:100px;}

對于IE6及其以下版本的瀏覽器，則可以利用其支持的expression屬性，在css code中嵌入javascript code來實現(xiàn)圖片的縮放,如下：

復(fù)制代碼

代碼如下:
.thumbImage {max-width: 100px;max-height: 100px;} /* for Firefox & IE7 */
* html .thumbImage { /* for IE6 */
width: expression(this.width > 100 && this.width > this.height ? 100 : auto);
height: expression(this.height > 100 ? 100 : auto);
}

首頁產(chǎn)品展示的圖片都變形了，客戶要求圖片等比例大小，和產(chǎn)品展示的效果一樣：

找到的相關(guān)知識：

css控制圖片的等比縮放
css樣式代碼

復(fù)制代碼

代碼如下:
<style type="text/css">
img {max-width:500px; max-height:500px; scale:expression((this.offsetWidth > this.offsetHeight)?(this.style.width = this.offsetWidth >= 500 ? "500px" : "auto"):(this.style.height = this.offsetHeight >= 500 ? "500px" : "auto")); display:inline !important;}
</style>

示例中是默認網(wǎng)頁所有的img的標(biāo)簽中的圖片都會縮放，如果想讓特定的圖片縮放只要修改下前面的css名字，然后在網(wǎng)頁中調(diào)用就可以了

上一篇：css div 邊框陰影利用背景圖或內(nèi)外層div實現(xiàn)層次感覺陰影效果

下一篇：css中使用if條件在各大瀏覽器(IE6/IE7/IE8)中hack方法解決教程