|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14381
- 金币
- 2476
- 威望
- 1647
- 贡献
- 1424
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。% z% m3 M: B" d
关键在于：max-width:780px;以及下面那行。
$ a3 _* M4 O( R( w% h2 W. l固定像素适应:
5 K, e& B! D! U& }3 X( ?6 h+ \
; `! i7 J/ G+ Z0 @5 sdotted; 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> 以下是引用片段：
8 ~3 E% U. a4 @% G7 p<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ r/ I+ |) U/ X# ]. s1 L8 p1 ^. F<html xmlns="http://www.w3.org/1999/xhtml";> 4 t I$ R4 W' j+ M& t4 Z, _
<head>
' @9 P# L: J% M2 } p<meta http-equiv="Content-Type" c />
; Q4 W9 j0 a3 z T<title>css2.0 VS ie</title>
! u" ~1 h2 ?9 h/ u<style type="text/css">
7 o+ r+ ^. T+ H" O: W1 e0 V3 m& s<!-- 3 D3 G( I8 X# i. M& y1 G
body { 3 g' I" F5 g( t" f
font-size: 12px; 9 T; p* B6 z& p5 s
text-align: center; , u* J& N* W2 Z$ f; k, D
margin: 0px;
, `. u! }6 I( b' Dpadding: 0px; * E7 r: @" f. W- v
} _ x/ \2 }2 B2 @0 X
#pic{ : D" W. M$ ^6 v) ^
margin:0 auto;
2 c) L L$ J, {) Q$ s* p5 Q/ J width:800px;
, Y8 N/ I) j0 J1 R. X w. o" | padding:0; $ d2 h- N3 V! e7 D) E
border:1px solid #333;
( `: t" ^' x& S* V4 O0 D( O6 l } , E4 D. `" J+ @
#pic img{ " @" U2 K7 _) r) F* T
max-width:780px;
3 ^& m( \! g! R/ `, }! Zwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); / E, ^$ j3 f F, ^: v+ o* [
border:1px dashed #000; B3 b0 N' C" r0 f; E9 F
} 2 _; w" X( h! e W) `6 p$ d
-->
4 Z, I& e% ?0 J</style>
1 O. }, \9 v2 A4 K</head> 6 H& _7 M$ Y- n, m8 _" A# w
<body> J; I2 u/ k: K3 B* l3 O% Y4 D6 E, B
<div id="pic">
. X% B$ A$ x9 h8 w0 M2 d<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 1 g) V, Q: d% R, ^$ C$ R1 A
</div>
, Z6 _) p3 R# ~</body> ) F$ H( |0 r0 Z% V/ v
</html>
! \+ G( i8 P/ L8 |! O n7 B* c: l4 f! s+ @# s- q4 e, v
百分比适应:0 ~' `7 D2 @$ T4 y' U! \# g+ Q
以下是引用片段：
/ s! T& n+ s% T* b9 e6 X! ?1 f<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, v9 a, e: F8 \4 S! H# v; ~<html xmlns="http://www.w3.org/1999/xhtml";>
5 T/ u% C$ @& d" `( ?<head>
L4 q0 e6 G) k9 O1 z8 J0 \% p<meta http-equiv="Content-Type" c />
$ r5 L4 M& ?4 n. T<title>css2.0 VS ie</title>
+ s& M6 i6 g# r" d. X5 v& t<style type="text/css"> ( ~" f0 c2 [6 s6 R0 H7 h0 A
<!-- , i0 U4 B) [4 V6 r% V: G
body { / W3 W" ^3 w3 M) L* U
font-size: 12px;
: U2 V# h) v! @1 Gtext-align: center;
9 _' n0 E7 V* S% W. ]margin: 0px;
8 X z6 ^) L0 k8 I% r1 {% ypadding: 0px;
" P! {7 u3 e, B5 n$ J' _} 0 }3 |* K9 j P* n! c7 T
#pic{ & C; D. Y1 z- W; G, B( l6 ]+ _
margin:0 auto;
* ^! ~2 z3 o" G! r+ d* e9 o- L! v" k width:800px; / C% J. Q/ E- @- c& P; {
padding:0;
: {: H) G, y7 a# W0 \; m: a border:1px solid #333;
* w2 E& F3 ]4 ~6 `6 d: d } 4 T4 F: l# U7 r: d6 M
#pic img{
* _: X% }9 O. ^/ F/ j% @ max-width:780px;
. [( N# l" ^9 Swidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- h f% A/ j H/ o& Mborder:1px dashed #000; % ?0 `( u0 T! \
} $ y3 p7 e6 P2 b% h; C, z
--> * `3 ?/ x) i8 R' E; z
</style>
% c# I3 s0 o$ Q' x; q$ x. c* S6 i' u</head> , j2 M4 n" b( U$ W' l% C1 ^4 T
<body>
8 N1 p6 S. b s8 ?<div id="pic"> 5 B! F1 ]7 J& E+ R6 M- q' ~3 X
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 x$ P4 Z0 b4 K0 |, R</div> 5 z) t. Q/ _# j+ y! u. A# [
</body>
0 S" x% [7 O0 C9 J$ G</html> |
|
发表于 2007-12-8 14:55
| 