标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
3 f) v! A [2 \
关键在于：max-width:780px;以及下面那行。
r& s! U8 F& X7 Q. z
固定像素适应:
- o! O. u1 c5 ^7 b, f
* M7 _6 h E: Y! G. M
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> 以下是引用片段：
3 f3 \) X9 B; V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 l4 K- v" b* r1 o( Z* _
<html xmlns="http://www.w3.org/1999/xhtml";>
' k) }$ t1 q) F" b
<head>
; Q7 l& q; B, T
<meta http-equiv="Content-Type" c />
9 a4 E" X3 n c) f' z1 A" j/ _
<title>css2.0 VS ie</title>
c! w& v2 }2 N* v6 b6 K1 j
<style type="text/css">
+ P( L* M* ?9 i$ y6 U0 v/ d
<!--
( w7 j7 B! E% H# o2 S8 w
body {
; M5 d$ Z" P6 B& V8 y5 B! @# _2 J
font-size: 12px;
- E, x% H* O; r# W3 {3 Z, {
text-align: center;
+ H, ~% N% U- W! h+ d2 q
margin: 0px;
5 r6 a$ p6 c$ m8 o
padding: 0px;
0 I/ n$ G& X3 x5 @7 f; A/ U/ o9 s
}
) H1 t8 }% G {2 S! Y) N
#pic{
5 z. ?, H) L, z1 t$ u% K5 w, K
margin:0 auto;
) b: W" E( [. ^8 l
width:800px;
; a9 Z" K+ e8 ^+ A
padding:0;
, b t# Y8 r! h# U0 y8 Y% @/ s
border:1px solid #333;
# Q0 G8 r5 _0 ?/ e
}
; k% c1 L& A3 i$ g, J
#pic img{
+ Y# p1 D8 J f0 J; F+ N
max-width:780px;
# D7 X) v( J R! Y
width:expression(document.body.clientWidth > 780? "780px": "auto" );
( j% ?1 e. Z& M4 a5 \) D7 [
border:1px dashed #000;
4 F( E* t/ \# q6 |4 q
}
: b3 E! v1 E, x# y+ k. j% u
-->
: i; b% L1 }5 G( _4 F8 M+ [
</style>
6 x. ~( @+ @) q) Y; U
</head>
* @4 Z! V* b- k) F" r' D" e
<body>
. D _% T3 }: B& @& r( |+ f; W7 p; P
<div id="pic">
; {0 O* C/ |- r" c) H' j
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
9 }9 a l" x! ]
</div>
0 n8 x9 n1 i; K9 J+ n
</body>
2 S9 X8 d l3 }2 J6 m
</html>
, t# p! N* I" r9 h9 A* `
, ~3 z! N% |/ Y; |1 n! I
百分比适应:
2 X0 T7 o, ~& b1 \+ L
以下是引用片段：
0 v) A5 n# X3 i4 q1 F, [7 }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 Z$ d* e+ U9 p0 d# Z3 v
<html xmlns="http://www.w3.org/1999/xhtml";>
8 ]% U: t7 @% ?
<head>
: N8 i) s2 g3 r9 E Q% A
<meta http-equiv="Content-Type" c />
# |$ L' j2 F/ g9 Y, Y
<title>css2.0 VS ie</title>
+ m% T5 L% D4 I6 e4 _, O0 G
<style type="text/css">
# n8 u [: u% ~& W' {
<!--
5 V+ D0 }; V0 Z9 A; l
body {
5 A5 T4 T# o$ h- }' H0 H! w6 ~
font-size: 12px;
# K3 J9 O! E7 J
text-align: center;
/ i6 `4 H9 ?* \6 d. @
margin: 0px;
% T. `( g6 A( f% \. M
padding: 0px;
1 U4 Y/ j/ q4 l' G" V" h( i
}
4 S; a6 d1 V, m8 U6 n: i
#pic{
; t* }; p) b% v/ A
margin:0 auto;
8 s8 y! W- e; g$ O9 l
width:800px;
7 X1 A7 d3 z' ^- h8 S9 t: Y# q
padding:0;
* ]8 G, S' O( t& t- A. O
border:1px solid #333;
; V% P1 O3 ]1 ~: `
}
/ ?8 M. F) m# q3 o
#pic img{
- N& w) |2 S1 L1 i! x
max-width:780px;
( u! T! ]; }& N# I
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
0 S0 D: W5 ~: z
border:1px dashed #000;
4 a" J+ o E; ^$ L5 H; |
}
5 J k3 h( l, j
-->
6 S# _) |- M# k+ B! g
</style>
2 C" T S$ e9 t2 I E7 p) h
</head>
3 r' y, ^; D* O) x5 \5 ~
<body>
* D" l1 y" i( m; l2 T
<div id="pic">
5 u' V$ A1 y- q0 d1 b9 k
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
. }6 M9 `" @) P0 ?4 i% |
</div>
4 A5 u, m' \: I4 M6 ]
</body>
+ _* q$ l! l0 {/ ~( F6 P- w
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
