歡迎光臨一流素材網,免積分免費素材下載!

利用CSS樣式:max-width實現圖片等比例縮放技巧

所屬欄目:DIV+CSS技巧更新時間:2014-08-25來源:作者:deepdfhy瀏覽:0

在制作網頁時,常常會出現,文章內容里插入的圖片尺寸過大,從而撐開網頁布局或者超出部分被隱藏。

一流資源網之前有分享過幾篇關于利用JS來實現,圖片按指定寬度或者高度等比例縮放的代碼,點擊查看

這里則分享的是純CSS的方法實現這個效果:


例:

網頁代碼:

<div class="article"><img src="images/16css.jpg" /></div>

CSS代碼:

.article {width:500px}
.article img {max-width:500px}


max-width 就是最大寬度的意思,設置圖片最大寬度是500px,圖片真實尺寸如果超過500px,就會自動縮放到 500px,高度也會等比例縮放。


但是,有個缺點,IE6不支持 max-width 

解決辦法有二:

1、直接忽略萬惡的IE6。

2、點擊查看另一篇關于 利用CSS樣式:max-width實現圖片等比例縮放技巧且兼容IE6的方法

收藏 0 有幫助 0 沒幫助 0 打賞 0
相關教程
給個評價吧
长百集团股票行情