DIV下圖片自適應(yīng)解決方法
div下圖片自適應(yīng)解決方法
以前的解決方法主要是利用js來(lái)實(shí)現(xiàn)，但用過(guò)的人都知道該辦法有點(diǎn)繁瑣。還有一種是在外部容器定義over-flow:hidden。但這種辦法只會(huì)切割圖片而不會(huì)自動(dòng)適用。
關(guān)鍵在于：max-width:780px;以及下面那行。
固定像素適應(yīng):
dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0> 以下是引用片段：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<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"/>
</div>
</body>
</html>
百分比適應(yīng):
以下是引用片段：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<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"/>
</div>
</body>
</html>
新聞熱點(diǎn)
疑難解答
圖片精選
