|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。. V. \9 o& X# i" R, X q7 o
关键在于：max-width:780px;以及下面那行。* [# {1 g. m$ D7 |
固定像素适应:
9 q9 F$ ~0 e9 R0 ?' |
% M/ c5 u* a6 H; M* odotted; 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> 以下是引用片段：
g. E( f% l8 ?% e<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 7 P& A+ z! H6 }( i
<html xmlns="http://www.w3.org/1999/xhtml";> ; s1 y% ^9 `6 I
<head> + V+ g; x4 T6 o. W1 G# i- v
<meta http-equiv="Content-Type" c /> + n, J3 s O" n4 D3 u& j* f
<title>css2.0 VS ie</title> 6 |. z$ U5 X$ n% e- c4 L' V- N
<style type="text/css"> - [8 m( W" r1 p. z" U, q
<!--
2 {" q. x, i0 J$ `4 S$ |body {
1 u7 n% A! l8 N3 {. N2 ^& Ufont-size: 12px; 8 E- E9 U4 I" a2 t- N7 f
text-align: center; ^+ |& J: s1 A: L; C
margin: 0px;
1 g2 ]$ b7 c6 J/ U2 N' d2 c( Y7 E+ V# jpadding: 0px; 7 c2 X/ }, p. z# {4 p/ n
} 9 M: ]0 h: i1 O0 R
#pic{ / p1 n5 Q8 M; V9 t! |' G9 Y
margin:0 auto; 7 A7 `' I3 ?6 t5 z1 X' [% G
width:800px;
. X, ]+ z9 ~, t& N% M3 c$ n padding:0; ; u; e L# c! `
border:1px solid #333;
9 Y; Z. t! b4 {3 ?* O* P9 ^ }
9 x" [1 ~9 Y3 W2 i) b) `/ I* o#pic img{
4 T$ Q( D, W! M9 [ max-width:780px;
# ]8 n, Z; E; c6 Y+ u6 xwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
0 u8 f8 q( B# S0 Lborder:1px dashed #000; + Z7 F" V- e# r. e2 k' ~4 [2 C
} % K# P9 N, H9 W8 H
--> 6 ?" S% a/ t0 Z
</style>
# ` G% T" ?" x</head> . H! C- D( ^% D) v; [$ Q: h
<body> " g! o5 y# \ c
<div id="pic">
2 g0 G& T9 z! \ D3 H e<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
# Q- Z* Y9 L& D3 V4 t' R N+ f</div> & T; Q5 A7 j7 J5 V/ Z* L; C8 ?" c
</body>
' ?0 Y; ^9 [3 a, S, H</html>
; z1 @: J9 \9 r$ Z0 E- A6 L7 u7 ^' E/ B$ ^2 _7 c y) f% \
百分比适应:: ?5 Y0 N% @+ i$ F- ]. j- [
以下是引用片段：
1 |( N& d' N) i& _, b' y; d' U<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" @7 ~1 l/ p8 U* x<html xmlns="http://www.w3.org/1999/xhtml";>
, {# E! D5 `) j<head>
* V3 X. G3 `; }: v+ `' i. @<meta http-equiv="Content-Type" c /> - }/ v8 j. i# i" K: a/ U, ?
<title>css2.0 VS ie</title> 6 O& [# D8 \" _- F, d+ ?+ l. @; [
<style type="text/css"> $ J. l- x4 j9 }1 I* |
<!-- ! `. Q. s$ c: L! y
body {
5 J& x* @# Q# h2 @; X1 }# Jfont-size: 12px; * V: c+ I1 k; j2 v' Y! K
text-align: center;
% ? D- }8 T1 h [. S7 wmargin: 0px; . |6 M" V+ |5 p5 K, g# U+ u, m
padding: 0px;
. u8 \* b8 i" |+ R% X- T5 o}
# _: P4 f' B2 S9 r6 ^ h) m0 w#pic{ $ {$ d+ _+ X- K" ~
margin:0 auto; J7 _. a6 I) a: S2 K( J
width:800px;
9 T7 C: P. ^4 N0 V3 M+ H padding:0; 4 i7 ]: O5 }2 ~) j4 Y: E! h
border:1px solid #333; . e; m2 E: c. r
}
' W8 ], c, D, @% T#pic img{ , ~8 J Z$ E' G0 ~; n* z' i
max-width:780px;
* ^! b* l' |2 I5 x( p& }/ x4 h1 Nwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 0 ^6 K! ]2 D# k0 k& O6 ]2 t
border:1px dashed #000;
/ J: J7 E: O, `7 E/ ?}
: z0 t+ r" f% Z! }/ @6 m3 Y2 K, ?-->
1 r- i6 H& D! W( A, `) p% i</style>
5 u. v! W2 f( F</head> # y c6 W# ?6 M& C! F2 M
<body>
9 `3 F+ m# P# ?8 F* q! |7 s<div id="pic"> 3 w" L& E# Y" m( v9 w
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ) g! ~8 ^; m0 C
</div> ! t- b; f2 {: s, L& y
</body> - X) M1 F$ ~' Z0 n* v, H
</html> |
|
发表于 2007-12-8 14:55
| 