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>? ??
JS實現瀏覽器菜單命令
網站建設、網站優化、微信開發、網絡推廣服務商蝸牛啟橙聲明：如發現內容存在版權問題，[email protected]，[email protected]?，涉及言論、版權與本站無關。
