|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14329
- 金币
- 2450
- 威望
- 1647
- 贡献
- 1398
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
/ ]- t1 G; p. H' i关键在于：max-width:780px;以及下面那行。
3 L+ V6 d- ] S3 J固定像素适应:
$ m2 b+ L) m* C5 ^- ]( H' c" Z' K- T, s* K" T. c, c
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> 以下是引用片段：2 J R, g' r" l- O& D t
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ }/ {. \, m3 V- z2 U% W. V<html xmlns="http://www.w3.org/1999/xhtml";>
3 B0 ^; d7 v7 m1 N3 J<head> 9 t$ W, P4 P" ]/ f6 q
<meta http-equiv="Content-Type" c />
3 R0 |; n+ A7 L8 Z( D) g* _<title>css2.0 VS ie</title> 1 Z# M/ K0 I) f- Z; i7 e( S3 c
<style type="text/css"> ( u4 {1 }/ Q- Y4 L/ p3 W( S" V
<!-- ; |4 h3 `: H' z+ K" S: ]7 N
body { 0 U" v9 n: i# z2 J
font-size: 12px; 2 t8 E! u) z+ l: f p
text-align: center; ( X4 C; M$ t/ O6 G( [1 |
margin: 0px; : U. C) r& W# q6 E: G R' r
padding: 0px;
% n* R8 R7 n: S# ^}
' G4 T- S* ~4 Y+ h' @* {#pic{
0 V- {# k4 m; u! s8 G margin:0 auto; + P- H4 {6 W* y, @4 {! C6 | d
width:800px; # a/ h4 t" ]! E8 F6 s1 `3 v
padding:0; 9 ]8 ?2 X3 r4 p4 O
border:1px solid #333; # g; n: X1 P) |7 C4 K
}
$ A0 ]" t- P. i#pic img{
6 D! O7 _1 M* _: _8 H. h) A max-width:780px; # w# S- ]& l/ \( i: d" _# _, G
width:expression(document.body.clientWidth > 780? "780px": "auto" );
( t! U6 I1 w) G& R: ?: \5 u0 Tborder:1px dashed #000;
; l# R& A2 U6 z% e: f |} : ^5 H# f+ x1 i& Q9 }
--> % v5 d4 Q" ~; ]2 Q, B
</style>
6 |6 M6 N( A: P: a</head>
; f+ e# t( Z& Y6 A0 l7 H<body>
3 p1 u9 k! g% b5 [: |$ z<div id="pic">
. k6 Z) O/ X) }<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 2 c" x* s a$ @) K- i6 H
</div>
: P, l; A. \( O/ }9 u8 K</body> ' ~- c2 \ z8 r% w. U
</html> 7 L7 U# I+ m E5 W* _
- I7 C5 K. |1 f3 b% w9 d0 b
百分比适应:
* q# i) B, r0 h0 v以下是引用片段：
! h3 b! C) v6 Y/ k/ Y/ {9 U<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ i! I5 @; H. k+ C<html xmlns="http://www.w3.org/1999/xhtml";> 1 c9 O2 m4 g' G: h( r+ X9 t
<head> $ j+ R6 y6 _( Z' w
<meta http-equiv="Content-Type" c /> / S+ v* }6 n% O8 ?' S5 b' R
<title>css2.0 VS ie</title>
0 Z0 d# ?4 c5 R1 ]$ Y<style type="text/css"> 5 i8 n; P5 m, v# T8 g7 e. L
<!--
* y8 x7 u+ e: r( O, Q1 Pbody {
* c" s1 ` n6 a/ dfont-size: 12px; 4 C" U$ ~' D5 Y! ^/ Y/ h
text-align: center;
8 `; T* i8 K' d$ k0 ^* m7 gmargin: 0px;
2 k: x& Y$ q5 j" w& @' Epadding: 0px;
& d+ G5 C s$ P2 G. r7 L' J} " [8 b8 q+ P! N0 ?$ Y
#pic{
& |5 J8 D2 ~% f9 p3 ]0 K1 r margin:0 auto;
3 L$ c) P+ k* j5 j) G% { width:800px;
2 e' D0 B7 j9 W$ J J padding:0;
1 u, L! D0 \% n: v border:1px solid #333;
% Q* Q, s' v* e. I1 S$ G: L }
5 L( ]( D( ]* @8 ~#pic img{ ( K# Z- o+ E# D% w: U6 ~
max-width:780px; ! s/ v! M: T3 w& n2 K& W4 ?# D
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
( c% X5 ^( Z& Z3 ^) `) ]4 A( C$ [border:1px dashed #000; ) W- `" G- c7 U( t ]
} # V, ^/ ?) q5 A# N* y# s: W' l8 h
-->
7 {# @ C- l0 d. [1 e- o</style> & E) _ K8 O5 Q& I. y% n$ f8 l, V
</head> / k1 d/ B4 O8 J7 @4 H
<body> / m8 M, b4 n( f& \+ Y
<div id="pic">
- f! G1 B% r% R' c: H- S9 d# N<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
+ ]2 R' M* g6 f6 {5 d/ z( ^</div> # O: u0 |8 m5 v' s* Q0 n8 p6 G3 R
</body>
. c; j% \7 z+ F6 g( k</html> |
|
发表于 2007-12-8 14:55
| 