ホームページ >ウェブフロントエンド >htmlチュートリアル >画像が溢れ出す問題の究極の解決策 div_html/css_WEB-ITnose
画像が溢れ出す問題の究極の解決策 div_html/css_WEB-ITnose
- ringa_leeオリジナル
- 2018-05-10 17:59:142524ブラウズ
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的处理}