當前位置:才華齋>設計>網頁設計>

網站建設怎樣控制大圖片的網頁寬度

網頁設計 閲讀(5.35K)

網站建設如何讓大圖片不超過網頁寬度?解決圖片超出寬度或撐破p css佈局方法,就跟隨本站小編一起去了解下吧,想了解更多相關信息請持續關注我們應屆畢業生考試網!

網站建設怎樣控制大圖片的網頁寬度

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

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

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

具體過程:

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

s {margin: auto;width: 600px;}

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

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

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

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

s img{max-width:500px;_width:500px;}

圖片撐破布局原因

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

2、沒有設置p佈局的寬度

  【拓展閲讀】

網站製作用CSS可控制超鏈接樣式,一般分為四個部分:a:active是超級鏈接的初始狀態;a:hover是把鼠標放上去時的`狀況;a:link 是鼠標點擊時;a:visited是訪問過後的情況。

CSS控制超鏈接的三種方法

1、通過對應超鏈接外的父級的css類的css樣式來控制超鏈接的樣式

案例超鏈接代碼

CSS

對應CSS代碼

shi a{color:#333;text-decoration:none; }

shi a:hover {color:#CC3300;text-decoration:underline;}

2、通過鏈接內設置類控制超鏈接樣式css方法

案例超鏈接代碼CSS

對應CSS代碼

shi{color:#333;text-decoration:none; }

shi:hover {color:#CC3300;text-decoration:underline;}

通過這樣的設置可以控制鏈接內的css類名為“yangshi”超鏈接的樣式