DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> 網站建設怎樣控制大圖片的網頁寬度
網站建設怎樣控制大圖片的網頁寬度
編輯:布局實例     

   網站建設如何讓大圖片不超過網頁寬度?解決圖片超出寬度或撐破div css布局方法:

  1、在文章中發布圖片的時候將圖片編輯縮小

  2、通過對對應div的css來設置顯示的圖片最寬寬度

  3、通過css對圖片設定寬度。

  具體過程:

  通過css來控制代碼如下(cmcss是對應父級類名):

  .cmcss {margin: auto;width: 600px;}

  .cmcss img{max-width: 100% !important; height: auto!important; width:expression(this.width > 600 ? "600px" : this.width)!important;}這種圖片第一次加載時候圖片不能顯示

  直接通過對對應的div內的內容圖片寬度設置代碼如下:

  .cmcss img{ width:500px;} 寬度自定,但是不推薦此方法,因為設置後此div布局內的圖片將全部寬度為500px,那樣將造成圖片小的,被放大顯示模糊。

  可以通過對圖片設置最寬css可以使用max-width來設置,但是IE6不支持,但是可以使用浏覽器的css hack來設置代碼如下

  .cmcss img{max-width:500px;_width:500px;}

  圖片撐破布局原因

  1、由於浏覽器版本低(微軟IE6)

  2、沒有設置div布局的寬度

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved