|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14431
- 金币
- 2501
- 威望
- 1647
- 贡献
- 1449
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。, {! t9 R- t: F% L
关键在于：max-width:780px;以及下面那行。
- }' ^* m9 t0 ?1 ] U9 o6 m! Y9 m/ q固定像素适应:6 Z* t, O' s. I/ Y( u& {% O
; E3 R; ?2 w" X( J1 ]) M1 k, e _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> 以下是引用片段：
7 G* I- U! K' A3 ]$ I<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . f: z$ m0 D% ` Z8 w8 O
<html xmlns="http://www.w3.org/1999/xhtml";>
d* ^; V' l! S<head> 3 ^8 S! K/ v. v# C9 {/ `$ R- D
<meta http-equiv="Content-Type" c /> . d; B6 X: @: u* w1 V0 C
<title>css2.0 VS ie</title> ( r2 {0 L2 Q( ^
<style type="text/css">
& q/ Y- ^$ i5 r3 _7 `0 U% c! b# v<!-- ! A8 ?% f7 Z6 d2 g+ \' a+ H4 D
body { " Z- f M0 l0 r* U) i2 v
font-size: 12px; : m8 i3 n0 Q$ d- r8 m( N7 ~
text-align: center;
`8 h4 y0 W* Y; ^5 d" M6 W! h3 ]9 Jmargin: 0px;
3 y4 t" }2 Y$ [% A1 Kpadding: 0px; 3 Z) @) B8 s1 _% @& }* u
} 8 m0 \/ H3 m! i4 B* d
#pic{
6 u" H- w& F+ A$ v7 r8 U' t/ U margin:0 auto;
7 n9 \2 s" \6 U6 B width:800px;
T* b5 y+ U, B5 w padding:0; ( F4 o# y' |/ J& h4 a" {
border:1px solid #333; * e1 v% q3 A; [
}
- c/ R( |. t# U* I#pic img{ 6 @. Y- B' L! N3 s4 V3 L; ]1 C
max-width:780px; ) I% t7 @' o. d m' Y
width:expression(document.body.clientWidth > 780? "780px": "auto" );
2 ~- o, F; P2 O n. `) Bborder:1px dashed #000;
; H. H! z8 @' |7 Y \} $ D# a; C5 j+ M7 g9 l" m
-->
8 h2 H, a3 F3 I$ }. u- }& f `2 b</style>
! l' g% h2 b7 o4 O: N</head> 7 m; Y9 P9 p, k7 r I* U
<body> 2 f- l( r8 j, V C. J4 R% ~4 ]1 V
<div id="pic">
0 O* }5 V* f: G<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
/ q9 b, k: z. P9 H \$ Z: _' L. J</div> - m; `. n8 f$ _9 s
</body>
- F3 M# D! x; f' I7 n</html> 9 a% ]& e' L$ h( K' z
- K" G p" _1 Z0 ?' i4 n9 Z' ^百分比适应:
+ y) }7 F7 w: e: G9 Z r+ U以下是引用片段：
" ?: M8 g9 o; B# u/ i! D- E2 r<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* M% y+ a, u# i8 r7 e" R: m6 h2 ?* P<html xmlns="http://www.w3.org/1999/xhtml";>
( z! D) k9 v" Q4 P1 q& N<head> - E0 h) n! o' F
<meta http-equiv="Content-Type" c />
d. r/ D" s# }* E' U! h<title>css2.0 VS ie</title> ' k) \) f B0 I0 P6 V
<style type="text/css"> 6 y$ K$ W0 ^: {* ~! ^
<!-- % _7 q U4 w) a$ V
body { " @* `( x; \- b+ K8 Z% J
font-size: 12px; . {/ L/ O) `8 ^ `- F' F3 x3 [
text-align: center; L0 K9 k0 g& S" N! E6 e: }
margin: 0px; & q8 `/ t+ Y0 {
padding: 0px;
% J' ]/ r$ `& P' |- a4 c}
) @3 b* G/ S$ d#pic{
+ ~6 ^, w F: ]( L% a. S margin:0 auto;
* ~0 k# i9 S" Q) l, d width:800px; ) J7 H+ H `7 ?" M8 [- t
padding:0; 1 n: J/ L- c! @. U9 Z! o
border:1px solid #333;
4 X/ N+ ~* O5 _- N1 h- P } # h2 e6 d" Q2 a8 M6 v
#pic img{ 3 r9 E9 F U: M5 E. n. q a
max-width:780px; \. c4 \, v* ] _
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 3 R7 ?' Z0 |: C, C1 ]8 }: y
border:1px dashed #000;
2 H8 ` @' \$ U1 b& g+ p: W+ e}
, e6 I" k2 q7 w! E. @6 J4 p0 K0 _: |2 U--> 8 a( [5 b3 C8 g W$ [* W2 ]% N6 T
</style> - G: ^/ O( n- U1 k# m
</head> + z. ^# `" @. X# M. O3 {' Y5 A9 T0 q
<body> ' Z2 V0 \( |9 ?! \) w# F- ^
<div id="pic"> : W: L) F: K4 @9 Y+ E& U; r% l
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 3 J$ p+ P( s2 U$ c
</div> ! r" t* i: x8 }2 [
</body>
7 M, _2 p7 \( S9 H</html> |
|
发表于 2007-12-8 14:55
| 