• 當(dāng)前位置：創(chuàng)新互聯(lián) >> 常見問題 >> 前端開發(fā) >> css >> 最簡單的CSS3實現(xiàn)網(wǎng)頁圖片大小自適應(yīng)

最簡單的CSS3實現(xiàn)網(wǎng)頁圖片大小自適應(yīng)

• 作者：創(chuàng)新互聯(lián) 文章來源：網(wǎng)頁設(shè)計部 點擊數(shù)： 更新時間：2015-06-04

• CSS3提供了一個新屬性max-width:100%設(shè)置最大寬度為100%顯示，在配上height:auto高度根據(jù)寬度自動。就輕松解決了網(wǎng)頁圖片大小自適應(yīng)的效果。

  
  

  網(wǎng)站設(shè)計制作不得不考慮客戶端顯示屏幕大小。如你設(shè)計的圖片顯示太小，客戶顯示屏幕很大看上去很小氣很不協(xié)調(diào)。反之圖片很大在客戶小屏幕在就顯示不全把頁面美觀破壞。

  
  

  --------CSS3樣式代碼--------
  

  <style>
  /* 圖片自適應(yīng) */
  img {
  display: block;
  max-width: 100%;
  height: auto;
  width:auto\9; /* ie8 */
  -ms-interpolation-mode:bicubic;/*為了照顧ie圖片縮放失真*/
  }
  </style>
  

  
  -----圖片大小自適應(yīng)代碼-----
  

  <div class="img"><img src="pic.jpg" /></div>
  
  

  
  

  成都創(chuàng)新互聯(lián)科技有限公司專業(yè)網(wǎng)站設(shè)計制作、域名注冊、服務(wù)器空間購買電話：028-86922220

• CSS選擇器妙用 :上一篇
  網(wǎng)站建設(shè)中CSS樣式的作用和運用技巧 :下一篇