画像が溢れ出す問題の究極の解決策 div_html/css_WEB-ITnose-htmlチュートリアル-php.cn

画像が溢れ出す問題の究極の解決策 div_html/css_WEB-ITnose

ringa_lee

リリース： 2018-05-10 17:59:14

オリジナル

2539 人が閲覧しました

2 日前にフロントエンドページを書きましたが、このマシンではすべてが正常に表示されます。しかし、継続的なテスト中に、画像が大きすぎると破裂してオーバーフローしてしまうという重大な問題が発見されました。さらに、このページはアダプティブページであるため、解像度の異なるモニターに応じて p の幅が調整されるため、画像が大きくなくても、解像度が異なるとオーバーフローします。

ここで解決策を議論し、まとめます。
まず、簡単な CSS レイアウトを作成しましょう:

<html>
<head>
    <meta charset="utf-8" />
    <title>div图片溢出的解决方案</title><style type="text/css">#div_home {
    width:80%;
    margin: 0 auto;} #div_left {
    width:70%;
    height: 800px;
    float:left;   
    padding: 20px;}#div_right {
    width: 15%;
    float: right;
    height: 800px;
    padding: 20px;}</style><script type="text/javascript"></script></head><body>
    <div id="div_home">
        <div id="div_left">
            <img src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/600950/o_123.png" alt="小图片"/>
        </div>
        <div id="div_right"></div>
    </div></body></html>

ログイン後にコピー

次に、div より大きい画像を挿入します

<img id="img_test" src="http://www.xiaoxiongbizhi.com/wallpapers/__85/y/w/ywzwdjof0.jpg" alt="大图片"/>

ログイン後にコピー

解決策 1

CSS で画像のスタイルを設定し、最大幅を小さく設定します親よりも div の幅

img {
    max-width: 730px;
}

ログイン後にコピー

ただし、これは解像度が異なる画面ではオーバーフローの問題も引き起こします

解決策 2

オーバーフロー部分を表示しない:

overflow: hidden;

ログイン後にコピー

このコードは div_left の下に追加されます:

#div_left {
    width:70%;
    height: 800px;
    float:left;
    padding: 20px;
    overflow: hidden;
}

ログイン後にコピー

明らかに、この方法の欠点は、画像を完全に表示できないことです

オーバーフローの問題は解決されましたが、表示効果は優しくありません。隠れた部分に重要な情報が含まれている場合、そのような設計は不合理です。

最終的な解決策

画像が div から溢れる問題を解決するための 3 つの条件を満たすと同時に、画像を完全に表示でき、異なる解像度と互換性がなければなりません。ここに JavaScript コードを示します。それを解決するために。
アイデアは、div の幅を取得してから、画像の幅を動的に設定することです。とてもシンプルです。

コードを入力する前に、まず overflow:hidden; のコードを削除する必要があります。

window.onload = function(){    var getEle = document.getElementsByTagName("img");    var getEle_divLeft = document.getElementById("div_left");    for(var i=0; i<getEle.length; i++){
        getEle[i].style["max-width"] = getEle_divLeft.offsetWidth - 40 + "px"; //这里-40是padding的左右宽度和    }
}

ログイン後にコピー

考えられるバグと解決策

一部の div が最初にロードされると、画像の幅が大きいため幅が広くなり、画像は最初に取得されるため、レイアウトのフローティングの影響で再び小さくなります。 .div width なので、幅は変わりません。
保守的な解決策は次のとおりです:
CSS で、まず image 属性を none に設定し、表示しません。 JavaScript コードを読み込むときに、幅と高さを設定して表示します:

img {    max-width: 730px;    display: none;}

ログイン後にコピー

JavaScript の後に画像を表示するコードを追加します:

getEle[i].style["display"] = "inline";

ログイン後にコピー

コード内の位置:

window.onload = function(){    var getEle = document.getElementsByTagName("img");    var getEle_divLeft = document.getElementById("div_left");    for(var i=0; iログイン後にコピー

これで画像の問題は解決しますdivをはみ出して表示すること、上記3つの条件を満たしていること。
完全なコード:


   
   div图片溢出的解决方案

   
       
           
           
       
       
   

 
补充：
如果浏览器不支持max-width属性，可以给出一个判断，具体思路如下：
如果浏览器不支持某个CSS属性，那么得到的返回值为undefined，如果支持，则返回空，基于这一点，我们可以加一个判断
代码：
if(getEle[0].style["max-width"]==''){//支持max-width的浏览器    }else{//不支持max-width的处理}

ログイン後にコピー