|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14329
- 金币
- 2450
- 威望
- 1647
- 贡献
- 1398
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。6 n: k! x- C& B; v4 M! S; G3 ~7 I
关键在于：max-width:780px;以及下面那行。) c% t* n5 _8 v
固定像素适应:; ?6 c5 S/ ^/ d7 f" _. j6 e9 E
" X8 {1 \1 E: }. S, h( bdotted; 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 v9 S3 M$ m+ j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% F0 E# `+ g0 G8 x* @- ^1 K<html xmlns="http://www.w3.org/1999/xhtml";> 2 V h* c/ f+ d; |
<head>
% _2 F* M& S; ?# @% Y. i. V<meta http-equiv="Content-Type" c /> * {3 G7 \4 I' e4 B) J8 G
<title>css2.0 VS ie</title>
+ L# o- b& ]& L3 h1 T<style type="text/css">
2 ~+ _' R" E- B( N<!--
8 f0 F) G9 D) E* g3 O3 ^body {
9 V5 R, j8 f; v! S7 f7 f3 y; }9 Pfont-size: 12px; ! h, [- a/ O7 c2 O9 R5 `4 |: \
text-align: center; " Y& n8 ^: s% e
margin: 0px; : ^/ g& M! M* ?: q. Z3 L
padding: 0px; i& s* L/ j! l9 t" o1 `9 j' @: O
} 0 t- n Z( T/ t. X2 V3 R% w
#pic{
2 e) \7 t1 \4 p& C: I margin:0 auto; 3 |$ y0 V$ e3 j! E; Y" P
width:800px; 9 h7 C+ B" f3 e1 }* q( Y% H
padding:0;
7 N. K( b, C1 d" O2 l border:1px solid #333; 0 P j1 X) t7 Y) {
} 7 x0 Y2 W w! ]; s U$ {' v
#pic img{
2 z- y& i# x- x; P max-width:780px; & r! x E4 K( r1 H n0 i1 v: p
width:expression(document.body.clientWidth > 780? "780px": "auto" ); * X4 ~" r# [) w) o6 U+ g- ]
border:1px dashed #000;
7 e( Y# ^( m5 I# ?( W5 H5 y* h2 I}
3 Y. d) o6 \5 d) E+ a-->
) n8 J v4 z* V/ V; C& \5 i</style> & t4 h( o4 ?. Q$ G
</head> a, c4 ~( Y8 |! R& r" c
<body> ) A5 p& y" u9 V: S
<div id="pic"> + d+ d! [1 Y# v U( O x- t% \
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> " z2 ?% x1 \/ v P+ R+ E
</div> 4 J+ j' v. s1 [2 O- T# u/ F$ p8 P) h
</body> , |7 O. `& A4 u2 l7 V" b, Z
</html>
3 T% x" E0 |) \2 v( Q" ?6 H
' i2 J3 }$ ~) w) p百分比适应:
+ R9 G# k+ t4 g. N6 b. G" b+ F8 v以下是引用片段：5 S8 Q# D# m! `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> " g m- c& ~; }5 o
<html xmlns="http://www.w3.org/1999/xhtml";> - } W! I, F. J. U7 C
<head> 7 |5 \) @0 ^. W! v2 C" E' ^
<meta http-equiv="Content-Type" c />
* E2 o) T1 i3 d! G<title>css2.0 VS ie</title> . }" a" P- d7 P- a# F& J2 a
<style type="text/css"> 1 I$ N+ Q! S/ D# v& W' ^2 {+ @
<!--
X( K( L4 d9 e+ t& X. Nbody {
) z# _: @+ P4 U: h. s* Afont-size: 12px; , ^2 N9 q2 i# s8 U' @
text-align: center;
$ p* J+ v, Y' I( M% bmargin: 0px;
H, ^2 Z" f4 T" C) Fpadding: 0px;
* x: V/ g! K# f& |* [ E} / C* l7 `4 V4 z" R
#pic{ 2 m% c& I* E M7 ]! M
margin:0 auto; 8 q d. k% O8 I0 ?/ E# p
width:800px; + W( i6 H& a9 U& }$ @ c7 u
padding:0; 4 A& f$ `* X% {& V. x
border:1px solid #333; - {$ g# V1 t: _2 |5 j
} 2 H; _" U" H( q1 y6 g! k9 ]
#pic img{ " u5 L& H$ [4 G% L$ u# X
max-width:780px;
" N( @" G4 d7 F7 G# dwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); % X+ V3 P4 W3 J1 |* K( F. w4 o8 N
border:1px dashed #000; 4 K& i$ D* {& u4 ~7 w3 l
}
- a# d: z/ o8 S1 C--> $ ^) k3 s1 u Z0 [3 X# @- ?
</style> 9 s2 {# H, ?) p0 ]2 _
</head> " g: |" \# m S2 j& U
<body>
8 d8 L" `! k" Y6 b$ b<div id="pic"> 6 c/ @/ Q3 v# u) S; E
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
6 Z9 R8 |- _+ g/ {</div> 2 C- B0 T; _6 }, f u
</body> ( q% W+ G0 P8 `' x1 Y& p3 \1 n
</html> |
|
发表于 2007-12-8 14:55
| 