如何用CSS控制圖片自適應(yīng)大小？_Div+CSS教程
教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!
圖片自動(dòng)適應(yīng)大小是一個(gè)非經(jīng)常用的功能，在進(jìn)行制作的時(shí)候?yàn)榱朔乐箞D片撐開(kāi)容器而對(duì)圖片的尺寸進(jìn)行必要的控制，我們可不可以用CSS控制圖片使它自適應(yīng)大小呢？
我們想到了一個(gè)比較簡(jiǎn)單的解決方法，雖然不是非常的完美，假如您的要求不是非常高，已經(jīng)可以滿(mǎn)足你的需要了。我們看下面的代碼：
示例代碼 [m.ghpqjb.com]
div img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}
◎ max-width:600px; 在IE7、FF等其他非IE瀏覽器下最大寬度為600px。但在IE6中無(wú)效。
◎ width:600px; 在所有瀏覽器中圖片的大小為600px;
◎ 當(dāng)圖片大小大于600px，自動(dòng)縮小為600px。在IE6中有效。
◎ overflow:hidden; 超出的部分隱藏，避免控制圖片大小失敗而引起的撐開(kāi)變形。
相關(guān)Div+CSS教程：
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ)：常用CSS英文字體介紹
- IE6和IE7中border邊框斷線(xiàn)現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
- Div CSS網(wǎng)頁(yè)布局三欄頁(yè)CSSfloat方法
- 不規(guī)則文字排版的CSS樣式如何定義？
- CSS初學(xué)者技巧：談CSS的標(biāo)準(zhǔn)和最佳示例
- CSS混合風(fēng)格按鈕無(wú)延遲翻轉(zhuǎn)圖形技巧
- 樣式表中用星號(hào)定全局樣式
- CSS網(wǎng)頁(yè)布局:二列固定寬度居中
- 簡(jiǎn)繁體轉(zhuǎn)換功能 支持cookie記憶狀態(tài)
- WEB2.0標(biāo)準(zhǔn)教程：第四天調(diào)用樣式表
- WebDesignUsabilityCheckList-Web可用性檢查列表
- divcss網(wǎng)站布局的八個(gè)小技巧
猜你也喜歡看這些
- DIVCSS菜單實(shí)例：紅與黑具有立體質(zhì)感的CSS菜單
- DIV CSS布局入門(mén)示例(三)頁(yè)面頂部制作
- DivCSS實(shí)例：一個(gè)效果很不錯(cuò)的CSS列表
- 如何用CSS實(shí)現(xiàn)翻頁(yè)效果？
- CSS背景圖片background-image須注意路徑問(wèn)題！
- CSS實(shí)例：kijiji社區(qū)頭像CSS效果
- HowCSSLayoutWorks-如何進(jìn)行CSS布局
- CSS菜單實(shí)例：按鈕效果跳躍的藍(lán)色精靈
- DIV CSS JS仿kijiji導(dǎo)航條
- CSS布局實(shí)例：隱藏input文字
- 相關(guān)鏈接：
- 教程說(shuō)明：
Div+CSS教程-如何用CSS控制圖片自適應(yīng)大小？
。