|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14247
- 金币
- 2414
- 威望
- 1647
- 贡献
- 1362
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
% E/ P5 ^' W4 m m/ l关键在于：max-width:780px;以及下面那行。
* M8 j6 b2 x( J# C: _0 L/ H, X固定像素适应:
0 ]1 q; J. S! H- Q" t7 v" D0 S$ J+ z) n- A" E2 \. L( }! F5 ?
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 ?6 H6 m; T0 F' ^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ; a" Y$ H& M0 |. `! |2 k
<html xmlns="http://www.w3.org/1999/xhtml";>
& V5 i, X8 l& O9 Q<head>
6 z5 k5 p ^& K, M$ _ Y3 J+ b<meta http-equiv="Content-Type" c />
6 r( [/ n" I( D0 j5 R/ c g) Z" J& p<title>css2.0 VS ie</title> 9 \! N' S9 `' y3 Y* I. @
<style type="text/css"> . G% b: k% m* d, ~. T
<!-- 1 e8 x7 O% k& t, Z& Z
body {
2 f# f) b- v- q" L8 B/ lfont-size: 12px; % Y6 w: n: f6 P7 S0 u8 N0 o. q
text-align: center;
1 L2 p! M( Y6 U' D1 |margin: 0px; ) x) Z, u. R D; o
padding: 0px; w% ~) l! u+ Y0 ^
} * U( \( `* {3 J! F& U! z9 {
#pic{
; B S& r. v$ {" R+ L margin:0 auto; & \6 N" E; o+ g( l4 R' m
width:800px; ! R+ b3 ?0 x, Y7 h- O: v
padding:0; 6 Q$ ]* n; g4 Y' h- s3 `3 O) ~
border:1px solid #333;
+ V) J3 {1 k. T1 L } . Q0 k- C3 `+ u$ }1 s5 _
#pic img{
# j: [1 C; q( W1 M( K e+ a2 A3 H* V max-width:780px;
% P( h$ G+ }5 P& i) l) [7 vwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
) |& x7 e& x% t0 ^' a9 Aborder:1px dashed #000; 7 S1 w x* L5 Z G5 {5 L
}
# n) x3 D V8 S: c/ ]: L0 A3 d-->
) p: |+ m) R" V4 d+ Y9 n</style> % t* R2 T% [; p7 G% C
</head> 2 N! M/ j1 l# f- B5 G' W3 X
<body> * O) r( v. P0 w5 l% c
<div id="pic">
+ P4 W. B8 q& Y* f3 `<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
. d6 u4 q* K' Z" R. d7 V# Z b</div> . U% E7 ~, L( B: Y% N5 m% d; c
</body>
! V* z; ~; n |6 @' Z0 K1 M* K8 T</html>
4 I( Q+ r9 V0 B! F: H; H
; B5 E1 D& b7 R+ b, R百分比适应:
% A s' q) R+ k Q `( [0 b( m+ A以下是引用片段：5 v& H6 w& X) g' U, r2 n& w
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ! }5 B; A4 Q; g' T6 H
<html xmlns="http://www.w3.org/1999/xhtml";>
0 b: r6 m/ K7 k; V- G6 N<head>
; l% L9 I- D% W" h<meta http-equiv="Content-Type" c /> 8 [; e1 H/ Q3 y; v& `
<title>css2.0 VS ie</title> 8 ~5 G* {8 O6 h: h
<style type="text/css"> ) a, l$ H( @$ _ F
<!--
: Z0 A' z$ x$ T1 | @7 tbody {
4 j- N3 S9 ^4 Y8 B+ G6 ]0 L: {. }1 J% @font-size: 12px;
' |" x5 w1 s' H" \3 itext-align: center;
2 t/ t8 D. L. ]/ n) vmargin: 0px; 5 o8 i3 E; k6 g3 J+ T; a% @
padding: 0px; 9 A2 G$ u5 X% [7 q; M3 N, _
} ! k- x0 M6 J! t
#pic{
2 {3 \) Z7 i9 r) K( ` margin:0 auto;
p* T8 k9 g4 G; U, M! _ width:800px; 3 E* O; _; ], G
padding:0; 2 j6 T2 N* h! b- X* E8 x
border:1px solid #333;
' x) l2 ^$ q4 K* O }
' K* i: U; @( m) S# J#pic img{ 5 h2 z0 [ `' C- F& k
max-width:780px; : C( j* n! m7 U0 Z3 O5 Z9 [
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
$ I: [+ A$ o. o8 k. `8 x) jborder:1px dashed #000; ; W+ Q7 z' N& [2 h, w8 W
}
; m: x* z, Q# G; Z! I- z3 [-->
$ y& n. a$ T9 s6 f</style>
( e: L# o W: y0 {+ w</head>
- y; C' Y1 ]# U( @<body>
) m6 q4 B/ n1 U7 I- F4 S) z<div id="pic"> & x$ j9 E. F3 ?0 }+ l' }/ L& }
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + _/ l' Q: W7 r* l6 _; w4 X r
</div> % j! M( ]. P5 H9 o" o% _1 B
</body>
, Q4 x- p8 T2 F1 s1 y$ n</html> |
|
发表于 2007-12-8 14:55
| 