html设置div页面最底,使用css让大图片不超过网页宽度
讓大圖片不超過網(wǎng)頁寬度,讓圖片不撐破通過CSS樣式設(shè)置的DIV寬度!
接下來,我們來介紹下網(wǎng)站在開發(fā)DIV+CSS的時候會遇到一個問題,在發(fā)布一個大圖片的時候因為圖片過寬會撐破自己設(shè)置的div寬度的問題。
圖片撐破布局原因
1、由于瀏覽器版本低(微軟IE6)
2、沒有設(shè)置div布局的寬度
解決圖片超出寬度或撐破div css布局方法
1、在文章中發(fā)布圖片的時候?qū)D片編輯縮小
2、通過對對應(yīng)div的css來設(shè)置顯示的圖片最寬寬度 推薦
3、通過css對圖片設(shè)定寬度。
通過css來解決圖片撐破div布局案例
通過css來控制代碼如下(cmcss是對應(yīng)父級類名):
.cmcss {margin: auto;width: 600px;}
.cmcss img{max-width: 100% !important; height: auto!important; width:expression(this.width > 600 ? "600px" : this.width)!important;}這種圖片第一次加載時候圖片不能顯示
直接通過對對應(yīng)的div內(nèi)的內(nèi)容圖片寬度設(shè)置代碼如下:
.cmcss img{ width:500px;} 寬度自定,但是不推薦此方法,因為設(shè)置后此div布局內(nèi)的圖片將全部寬度為500px,那樣將造成圖片小的,被放大顯示模糊。
可以通過對圖片設(shè)置最寬css可以使用max-width來設(shè)置,但是IE6不支持,但是可以使用瀏覽器的css hack來設(shè)置代碼如下
.cmcss img{max-width:500px;_width:500px;}
說明:通過其他瀏覽器不支持帶“_”的css,但是IE6支持。剛好可以通過此css hack來實現(xiàn)對圖片寬度的現(xiàn)在。這里只能克服IE6顯示固定的寬度來符合其它版本的兼容性。
擴(kuò)展與提高
我們看區(qū)別不同瀏覽器CSS HACK的代碼
區(qū)別FF,IE7,IE6:
background:orange;*background:green !important;*background:blue;
你可能要問了,為什么不用“*”來代替“_”來區(qū)別IE6瀏覽器,這里值得注意的是ie6和IE7都會解釋和識別“*”的,但是IE7對important的識別具有優(yōu)先全,所以IE7在CSS代碼中有important將有優(yōu)先識別并成為唯一性,所以在有important時候IE7和IE6前面都可以用“*”號,但是無論帶important在前或在后IE7將識別為唯一區(qū)別css hack。所以這里沒有important的時候需要用另外IE6的css hack中“_”小寫半角下劃線。
案例如下(Blue hills.jpg圖片為800像素寬的圖片)
代碼:
www.divcss5.com案例-圖片不超過設(shè)置寬度原始圖片寬度為800PX,設(shè)置后如下圖為150px
截圖如下:
通過此方法對圖片的寬度設(shè)置最大寬度為多少,css代碼少方便,推薦此方法來解決圖片撐破div css布局的寬度。
總結(jié)
以上是生活随笔為你收集整理的html设置div页面最底,使用css让大图片不超过网页宽度的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 为学好计算机 要采取什么措施,计算机概念
- 下一篇: 字符变量赋值规则_Java的常量、变量、