DIV下圖片自適應解決方法

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

以前的解決方法主要是利用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

{丰满熟妇人妻中文字幕_国产人成无码视频在线APP_OLD老太VIDEOS老妇_少妇太爽了在线观看视频