DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS學習教程:CSS對網頁圖片img的控制
CSS學習教程:CSS對網頁圖片img的控制
編輯:CSS進階教程     

這裡為大家介紹的是DIV CSS對img圖片控制。
我們常常會遇到以下情況:
1、img圖片多了邊框,特別是鏈接後的圖片帶邊框
2、圖片超出撐破DIV

下面我們通過CSS來解決這2個問題。
1、img圖片多了邊框,特別是鏈接後的圖片帶邊框

根據以上圖,我們對圖片加鏈接,結果圖片出現了邊框,

解決方法:

我們只需在初始化IMG標簽CSS即可

img{ padding:0; border:0;} 加入此CSS即可消除邊框

2、圖片超出撐破DIV
我們常常會遇到由於一個圖片過寬過大,撐破了我們設置的寬度。
解決辦法
使用CSS控制改對象IMG標簽寬度即可,假如該對象為.yangshi設置寬度為500px,那我們就只需設置.yangshi img{max-width:500px;}但是在IE6中max-width是失效的,那我們最好解決辦法,在上傳圖片的時候更加設置寬度,讓圖片本身寬度小於該地方設置寬度即可,這樣感覺很麻煩,但是很多大的網站都是這樣解決,一可以避免撐破設置寬度,二可以降低圖片大小讓浏覽器更快打開網頁。

總結:
1、一個網頁中難免有圖片,這時我們需要初始化img標簽即:img{ padding:0; border:0;}
2、避免圖片過寬撐破網頁,我們建議在上傳圖片時候將圖片剪切來比設置寬度小,同時還可以對該對象加入overflow:hidden屬性,即隱藏超出內容包括圖片。

使用css讓大圖片不超過網頁寬度

讓大圖片不超過網頁寬度,讓圖片不撐破通過CSS樣式設置的DIV寬度!

接下來,我們來介紹下網站在開發DIV+CSS的時候會遇到一個問題,在發布一個大圖片的時候因為圖片過寬會撐破自己設置的div寬度的問題。

圖片撐破布局原因
1、由於浏覽器版本低(微軟IE6)
2、沒有設置div布局的寬度

解決圖片超出寬度或撐破div css布局方法
1、在文章中發布圖片的時候將圖片編輯縮小
2、通過對對應div的css來設置顯示的圖片最寬寬度 推薦
3、通過css對圖片設定寬度。

通過css來解決圖片撐破div布局案例
通過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;}
說明:通過其他浏覽器不支持帶“_”的css,但是IE6支持。剛好可以通過此css hack來實現對圖片寬度的現在。這裡只能克服IE6顯示固定的寬度來符合其它版本的兼容性。

擴展與提高
我們看區別不同浏覽器CSS HACK的代碼
區別FF,IE7,IE6:
background:orange;*background:green !important;*background:blue;
你可能要問了,為什麼不用“*”來代替“_”來區別IE6浏覽器,這裡值得注意的是ie6和IE7都會解釋和識別“*”的,但是IE7對important的識別具有優先全,所以IE7在CSS代碼中有important將有優先識別並成為唯一性,所以在有important時候IE7和IE6前面都可以用“*”號,但是無論帶important在前或在後IE7將識別為唯一區別css hack。所以這裡沒有important的時候需要用另外IE6的css hack中“_”小寫半角下劃線。

案例如下(Blue hills.jpg圖片為800像素寬的圖片)
代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.poluoluo.com案例-圖片不超過設置寬度</title>

<style type="text/css">
<!--

.cmcss img{ max-width:150px;_width:150px;}
-->
</style>
</head>

<body>
原始圖片寬度為800PX,設置後如下圖為150px
<div class="cmcss"><img src="Blue hills.jpg" /></div>
</body>
</html>

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