|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14419
- 金币
- 2495
- 威望
- 1647
- 贡献
- 1443
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
7 _4 j1 ^ g5 H$ O4 @关键在于：max-width:780px;以及下面那行。$ ]7 P E& D {* \9 E# [8 E
固定像素适应:
8 _' ^8 I- n3 g& l* v! r- K4 r0 X. i3 m% X& K) r* E* k
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> 以下是引用片段：
% U$ a, L) O! V6 n) E) v<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
) m* X4 k% ]) x, z8 [- m$ [<html xmlns="http://www.w3.org/1999/xhtml";> ! i! D* r9 T6 G: I% J) l- f/ V
<head> , h& d4 g2 j! d! [. y) ^% O6 u7 ^: c" B
<meta http-equiv="Content-Type" c />
5 O& w: O& T7 G. j! b% G<title>css2.0 VS ie</title>
7 F$ V! _9 L5 @+ T C& W<style type="text/css"> + F5 q0 Z5 z* b/ ~% Y& |: T
<!-- ! z6 ^9 X# h# W, l1 F! Q/ w* p
body {
/ |# J/ E, q- M1 n( L- u3 Ufont-size: 12px; 4 H0 D2 V9 l9 t" x( w
text-align: center; 4 {9 x0 s0 y, P6 H
margin: 0px;
' t% V1 r3 C* s/ rpadding: 0px;
9 s: z! d/ ~( i7 A9 G$ b+ T} 5 |" r+ M- }$ m8 x
#pic{ " }7 `, w+ T5 H6 U1 p; ?
margin:0 auto;
" b* U6 z. T4 h width:800px;
+ h0 y3 Z) x ?" G: h. Q# |+ a padding:0; $ k" d/ j6 Z2 \. P6 Z: a9 j
border:1px solid #333;
& y5 y9 e2 a9 B8 {3 w } + m& U( v; r1 J4 M0 }
#pic img{
. n. g% c5 d" L. q* O max-width:780px;
$ x) u, T U4 i* M4 _' ~1 k) ewidth:expression(document.body.clientWidth > 780? "780px": "auto" );
+ y. N$ k* P$ H% {. m, oborder:1px dashed #000;
2 X, W* V# A1 s, N}
. G' L/ ]! Y# G; b; g* A6 C, X8 h--> - }( e5 {1 M% [# z w
</style>
. |# S6 w; {- e- m</head> " S3 J% h. u A p9 z$ l
<body>
" {" e* H: H+ a) L7 L1 q<div id="pic">
1 G) U( d0 X+ K4 n/ U) A<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> : w" i5 y6 R# _; T8 h
</div>
; ?3 I* e, z* |# l. O$ h</body> 5 e5 X8 U2 K! R
</html>
9 x- W% k& V9 A- `( \; h8 c! n$ A; l7 S5 T6 A B
百分比适应:
! N% t- H- X# q* b, f3 _: n以下是引用片段：
6 F6 ?# R. v5 j5 e<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 L! w/ @6 X& M" A2 L0 z9 T<html xmlns="http://www.w3.org/1999/xhtml";>
% d6 Z) v" t) D: h( q; T<head>
, h) D: k8 u! R<meta http-equiv="Content-Type" c /> 4 B b5 ?) I3 L6 g Q" P
<title>css2.0 VS ie</title>
3 G9 b# f3 c5 y5 K+ H/ Y<style type="text/css"> 7 P. d' H( z+ _ V! I: Y* l+ C0 V( g/ Q
<!-- 0 G9 `4 C% w: a7 [
body { 6 a0 O8 [. k1 h* f
font-size: 12px;
: G8 g" c, ?; p* K$ {7 |text-align: center;
) ~, r. j) m8 N9 v# B% P6 Vmargin: 0px;
% w0 z9 D0 Y& J% K1 D- bpadding: 0px;
) R$ u B$ b% S5 n} $ J2 h6 U- q% @$ F6 Y
#pic{
( o1 k8 L e7 u1 U- V: u; G margin:0 auto;
0 I- f. X; H- M+ _7 t width:800px; Y( p6 `* j) ]2 S) X
padding:0;
4 n2 |- p/ u3 R v border:1px solid #333;
% L5 e9 P4 E& V% I" V) T$ a }
: u1 \6 ^7 G. a1 ^; v#pic img{
/ V ] H/ ~+ L/ N9 ] max-width:780px;
, P7 c: H& p) m. Wwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
4 q1 }- ~2 {* W' ?' O) ]6 y- [9 Zborder:1px dashed #000; 8 Y F% O2 g D" R
}
/ Y9 M/ I, G0 M! |/ n Y-->
1 z4 ?6 c3 P# {" d m" a- K</style> ' ^3 H8 \. C% G$ y& p. I' T
</head> ) W: G7 b4 t7 s, R
<body>
# q _1 h# D Y6 u1 a' {<div id="pic">
! ~' s6 B5 @) D6 O9 b1 x( Q, ^<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> " d) Q$ a) D# a1 m* |$ y( `! U$ Q
</div> ; M- B8 j9 `( x W
</body> , C2 q0 j6 J& N- n
</html> |
|
发表于 2007-12-8 14:55
| 