|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14317
- 金币
- 2444
- 威望
- 1647
- 贡献
- 1392
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
" n: X- f, C3 z& }% N; O关键在于：max-width:780px;以及下面那行。% o$ k7 j: ^4 Y2 y/ h2 U. v
固定像素适应:
" n) H$ U7 s5 E/ h2 ^" c2 ?; O" d% @$ o' z6 O8 Q0 q
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> 以下是引用片段：
, R# s* \* e& A9 o7 a<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" Z% @* R1 \; R* `8 \<html xmlns="http://www.w3.org/1999/xhtml";>
/ J5 A# |5 E7 x* [<head>
i! o" S* z8 t4 T ?2 B& _8 y<meta http-equiv="Content-Type" c />
k* h# I$ v9 P- P ~5 |<title>css2.0 VS ie</title> * V: o( C, v( B6 L4 p2 @
<style type="text/css">
& B! t' m0 ~5 F) t<!-- $ Z, |3 B0 Z* b8 n% q/ l+ x& u
body { ) m) {4 V1 O5 {4 i7 y
font-size: 12px; ( D k9 z# ?2 m8 V/ P
text-align: center; 1 M O# l/ t: \+ L" X9 [5 H, G* K
margin: 0px;
" |% O; j7 o. D! x; c6 hpadding: 0px;
% l# ]7 M) p& p8 g& z* c1 \% H- s3 s* i% N} 5 k/ g9 ]* m7 Z9 t
#pic{
) G% E4 d: X0 Y5 S' H0 J margin:0 auto;
3 s. R; e8 N! ]# J width:800px; ( [) l0 ~! ]: S# M" K
padding:0; 3 ], X+ }: `) N% w( w
border:1px solid #333; . z/ k5 G" V( u f3 z1 f
}
$ l" s9 B5 b' p$ Y j7 f8 o#pic img{ - c% J+ I- T/ @' l a% t
max-width:780px; 5 B* M! @' n; j, T1 p2 o
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ( f( w9 @0 Z: f2 N+ t, O
border:1px dashed #000;
0 e2 x1 i3 A2 Z5 V h6 n$ N}
. R1 l" f- G1 ]; i-->
: O$ K o/ q* h# q$ l</style>
! H* J8 v# G" U/ Z; I. a j</head>
2 K" a, \% g* s0 m<body> ; V5 y; e) }1 Z& A j
<div id="pic"> 2 R8 W) R; w. U+ e% I1 X4 J) q6 K
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
' S' z7 p/ Q2 r% ~8 x9 n</div>
8 B w' k* V- r p</body> : r; T& x, Y5 {& F4 P
</html> 4 ^5 q9 g7 w% h6 c: \. r1 e) E2 x
9 S: G8 U. t- I" {) o2 y. O
百分比适应:
. |% X, Q$ C7 l* R以下是引用片段：
5 M' W2 c# `! t' F<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 0 Z; j- _8 h% Z" L3 H! r' a5 n6 k, a
<html xmlns="http://www.w3.org/1999/xhtml";>
9 Y; s! q7 D2 V$ Z0 y* H3 P$ V6 J<head>
) c: V- s; O0 a* `% k" Z# A2 E<meta http-equiv="Content-Type" c />
8 _* X. B/ r/ M @, U<title>css2.0 VS ie</title>
1 e: a, Y/ w. l9 f' e* J% [1 k" f<style type="text/css"> + K7 M3 S& a) A L% q
<!--
- A: o; T2 p, k. H2 h& M, ]body {
/ i/ i. @/ P! p8 E% Rfont-size: 12px;
6 ~! |0 i8 E' l3 f) Ctext-align: center; 1 [. G3 g" ~6 M. D1 c, Q
margin: 0px; 2 p' O. @0 \$ `: P l# r, k: Y
padding: 0px;
& a% q" p) |4 `" n% j} ) ? h6 v: R. {
#pic{
9 [8 |% j$ T' ~1 j% Z5 x7 k4 E margin:0 auto; 8 g5 j& p+ k, e- T6 Y( {4 o4 b
width:800px;
2 n6 \! x# |, t: ?/ x padding:0;
1 u2 G8 d6 g/ q% C: E* G border:1px solid #333;
8 r) b' J8 N$ b+ ~ }
% E, R& @" e- p% D: v) `5 i+ A#pic img{
2 |5 Q9 w I2 F5 E/ a3 y" y max-width:780px; 1 q/ W$ Q2 {4 i* w: j/ Z! S1 G: |
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
" I1 q% ]! O3 L$ o5 _border:1px dashed #000; + w0 m/ N; x7 U p' X! D) S
} ; l, _7 k- f* {
-->
( b( s2 Y9 f: D8 N1 L: W% l</style>
- Q0 z% ^9 o# f8 U. c+ N, h</head> # G4 y1 y& @3 a& x9 e
<body> & F+ \8 w5 s R9 L
<div id="pic">
- A) D( L! C `: e<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> , Z6 [- s, o, J8 |
</div>
0 U& n3 Q9 K# t% x- C- u* L) K</body>
( @/ y: g- h* S# o- l1 x</html> |
|
发表于 2007-12-8 14:55
| 