圖片尺寸自動適應div(div控制圖片大小自適應)



全部代碼:

<!DOCTYPE htmlPUBLIC"-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style>

        .picbox

        {

            width:200px; /*此處200爲盒子的寬度*/

            height:200px; /*此處200爲盒子的高度*/

        }

        .picboximg

        {

            max-width:200px; /*  在IE7、FF等其他非IE瀏覽器下最大寬度爲200px。但在IE6中無效。*/

            max-height:200px; /*在IE7、FF等其他非IE瀏覽器下最大高度度爲200px。但在IE6中無效。*/

            height: 200px;

            width:200px;

            width:expression(document.body.clientWidth>200?"200px":"auto");/*當圖片寬度大於200px,自動縮小爲200px。在IE6中有效。

*/

            height:expression(document.body.clientHeight>200?"200px":"auto");/*當圖片高度大於200px,自動縮小爲200px。在IE6中有效。*/

            overflow:hidden; /*超出的部分隱藏,避免控制圖片大小失敗而引起的撐開變形*/

        }

    </style>

</head>

<body>

    <divclass="picbox">

        <imgsrc="../pic/dh.jpg"></div>

</body>

</html>


改自: http://hi.baidu.com/liyao1986/blog/item/040869d0b1f9ee9ea1ec9c5f.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章