<font id="j0tcy"></font>
    1. <cite id="j0tcy"></cite>

        DIV下圖片自適應解決方法

        發布時間:2018-09-06 23:36 作者:wnqc_2018 點擊:862

        以前的解決方法主要是利用js來實現,但用過的人都知道該辦法有點繁瑣。還有一種是在外部容器定義over-flow:hidden。但這種辦法只會切割圖片而不會自動適用。

        ?關鍵在于:max-width:780px;以及下面那行。

        固定像素適應:

        以下是引用片段:
        <!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>css2.0?VS?ie</title>?
        <style?type="text/css">?
        <!--?
        body?{?
        font-size:?12px;?
        text-align:?center;?
        margin:?0px;?
        padding:?0px;?
        }?
        #pic{?
        ??margin:0?auto;?
        ??width:800px;?
        ??padding:0;?
        ??border:1px?solid?#333;?
        ??}?
        #pic?img{?
        ????max-width:780px;?
        width:expression(document.body.clientWidth?>?780??"780px":?"auto"?);?
        border:1px?dashed?#000;?
        }?
        -->?
        </style>?
        </head>?
        <body>?
        <div?id="pic">?
        <img?src="/articleimg/2006/03/3297/koreaad_10020.jpg"?alt="感謝blueidea被我盜鏈圖片!"/>?
        </div>?
        </body>?
        </html>


        百分比適應:

        以下是引用片段:
        <!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>css2.0?VS?ie</title>?
        <style?type="text/css">?
        <!--?
        body?{?
        font-size:?12px;?
        text-align:?center;?
        margin:?0px;?
        padding:?0px;?
        }?
        #pic{?
        ??margin:0?auto;?
        ??width:800px;?
        ??padding:0;?
        ??border:1px?solid?#333;?
        ??}?
        #pic?img{?
        ????max-width:780px;?
        width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10??"780px":?"auto"?);?
        border:1px?dashed?#000;?
        }?
        -->?
        </style>?
        </head>?
        <body>?
        <div?id="pic">?
        <img?src="/articleimg/2006/03/3297/koreaad_10020.jpg"?alt="感謝blueidea被我盜鏈圖片!"/>?
        </div>?
        </body>?
        </html>? ??

        版權與免責聲明

        網站建設、網站優化、微信開發、網絡推廣服務商蝸牛啟橙聲明:如發現內容存在版權問題,[email protected],[email protected]?,涉及言論、版權與本站無關。

        做網站,做推廣,就選蝸牛啟橙

        咨詢專線:400-800-3253

        在線咨詢

        聯系電話

        電話:400-800-3253

        悠闲棋牌