CSS實(shí)現(xiàn)圖片等比例縮小不變形的實(shí)例代碼
我要評(píng)論下面一段代碼給大家介紹CSS實(shí)現(xiàn)圖片等比例縮小不變形 ，具體代碼如下所示：
<img src="../images/bg1.jpg" alt="" />
img {
/*等寬縮小不變形*/
/*width: 100%;*/
/*二選一*/
/*等高縮小不變形*/
height: 100%;
}
補(bǔ)充：CSS控制圖片大小不變形
1.(不錯(cuò)，我正在用)
img {max-width:630px;myimg:expression_r(onload=function(){this.style.width=(this.offsetWidth > 630)?"630px":"auto"});}
設(shè)置最大寬度是630px 如果大于630就把圖片寬度設(shè)置為630 高度就會(huì)隨著比例也會(huì)縮小 不會(huì)造成圖片變形
2.
img,a img{
border:0;
margin:0;
padding:0;
max-width:590px;
width:expression(this.width>590?"590px":this.width);
max-height:590px;
height:expression(this.height>590?"590px":this.height);
}
3.
div img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?”600px”:”auto”);
overflow:hidden;
}
max-width:600px; 在IE7、FF等其他非IE瀏覽器下最大寬度為600px。但在IE6中無效。
width:600px; 在所有瀏覽器中圖片的大小為600px;
當(dāng)圖片大小大于600px，自動(dòng)縮小為600px。在IE6中有效。
overflow:hidden; 超出的部分隱藏，避免控制圖片大小失敗而引起的撐開變形。
4.
如果想設(shè)定圖片的高度和寬度都不超過某一個(gè)固定值，就需要在圖片高度或?qū)挾瘸^這個(gè)值的時(shí)候，讓圖片按比例縮小到這個(gè)尺寸。
1，對(duì)于現(xiàn)代瀏覽器，比如Firefox或是IE7及以上，直接使用max-width和max-height兩條CSS屬性即可。
2，對(duì)于IE 6.0及以下版本，以上兩條CSS屬性均不會(huì)被理會(huì)。之前處理這種事情，我們往往會(huì)借助Javascript，然后為圖片加上onload事件。例如：
<imgsrc="..."alt="..."onload="resizeImage(this)"/>
<script type="text/javascript">
functionresizeImage(obj){
obj.width=obj.width>50&&obj.width>obj.height?50:auto;
obj.height=obj.height>50?50:auto;
}
</script>
總結(jié)
以上所述是小編給大家介紹的CSS實(shí)現(xiàn)圖片等比例縮小不變形的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
關(guān)于css控制圖片大小不變形的實(shí)現(xiàn)思路
css控制圖片實(shí)現(xiàn)大小不變形，下面有個(gè)不錯(cuò)的思路，感興趣的朋友可以參考下2013-10-08
這篇文章主要介紹了CSS完美解決前端圖片變形問題的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起2020-02-20
