|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14337
- 金币
- 2454
- 威望
- 1647
- 贡献
- 1402
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。1 ~6 I# E9 P: M3 Z/ h
关键在于：max-width:780px;以及下面那行。& x4 o; t0 |: d: [! [
固定像素适应:
( W, a$ |" h2 `2 h! i0 i& j9 [2 y X/ F
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> 以下是引用片段：- V5 }0 u; E. h( K- n- [' e
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 E" P4 V3 |3 c<html xmlns="http://www.w3.org/1999/xhtml";>
3 |- E9 K* `( t, U r( Q. H" g<head>
7 ?. C. o& r8 V) P' ^9 M<meta http-equiv="Content-Type" c />
) P" w4 A) T- g" Y; T<title>css2.0 VS ie</title> ' q8 I7 O, p+ g5 O; l: |0 O9 D/ ~
<style type="text/css">
( E5 D) b* ]* ^4 |6 y' K* B& g<!--
) p% B: p: m6 d7 G+ {2 h) Jbody {
- h' J4 O8 S0 l; W$ F0 }8 Q0 Nfont-size: 12px; # \! I3 d3 O5 ?- F, n5 C9 I
text-align: center;
/ C/ R9 |6 l) e& l: u# B; Jmargin: 0px; ! J3 C+ ^" s0 y$ }' s; a! A, v
padding: 0px; ! {0 x& k0 x6 J, W6 M2 }- i
} ) D; h& R9 N$ ]
#pic{
/ g: x8 |( U, D- g+ H margin:0 auto;
I! l% U& _6 g7 Y4 Q" ] width:800px;
$ M. N6 p3 R) g& U# @ padding:0;
/ k$ x$ i, a5 q2 L border:1px solid #333;
7 S9 G' z7 R& Z8 i }
2 O9 }5 K: T6 ]- d: ^#pic img{
* q n4 S1 n/ S/ H% K7 ? max-width:780px;
/ V: ^5 @/ n+ T% v$ H U1 pwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
. A" y+ ~; U4 {. |border:1px dashed #000;
8 E. x) R0 g. d" E} 2 u0 ?/ ?% k6 a, `' P, P! s
-->
" D% z! I! W M7 p1 G/ h7 M6 @: B</style> 5 ?- w# R& Q s; J
</head>
/ I9 j$ ? E8 b+ L, ]. @: U2 m6 `<body> M* ~! W6 C0 f5 c# Y4 z
<div id="pic">
1 m9 {' e" B" }; M: @% I: F<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
a0 o$ y- |& |* K/ x# y</div> 7 M! g' x2 E z# F+ \
</body> 6 [; Y$ `" Y) J: m
</html> ! j8 E: A' H8 f+ J; H/ q7 Y* f& f
! Y9 [+ X8 ?$ P! ~+ a0 \
百分比适应:
; z# N$ p! M. ?# H以下是引用片段：, a5 P" u! ~ m- N# b: }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% y* j, r# T8 H" d0 M/ r7 X8 E. p<html xmlns="http://www.w3.org/1999/xhtml";>
$ x* M% {. [) |( x* ?4 \+ J0 n. G<head> 2 s4 {* q9 a) I1 T% M9 l
<meta http-equiv="Content-Type" c /> ! [8 x) u+ D6 v, ]8 k: j
<title>css2.0 VS ie</title> ( R; d! r) W" i) d4 Z
<style type="text/css">
" E% M Q3 I1 u: B6 o* T<!--
& h: ]8 O6 v: p* d& m+ \body {
3 p0 j& Q$ h3 j2 P6 Rfont-size: 12px; S4 H5 g( L+ Q" Q9 _
text-align: center;
4 C# r3 Y I: @: m! n9 xmargin: 0px; . K5 G3 W* u. _3 F% g" f& N
padding: 0px;
# J# ], e2 d o}
; n# L' d; t% p0 G#pic{
7 K/ P! ]- \- z) b4 E" I8 s7 Z margin:0 auto; 0 C* P4 U2 h% R" g/ F+ Y; S
width:800px;
* i$ t; F) w2 D# \ padding:0;
/ V- N+ c* J2 p border:1px solid #333; 6 s& A2 l$ H$ |& U u6 Q" Q$ J
} ) m% D7 k" r" C" `- W& H( |, G2 W
#pic img{
5 J4 `% r0 l' B9 P5 P max-width:780px; 0 Q0 c1 V7 \. \" H5 ~8 @- H
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
5 M6 f2 o0 O) @, P5 a0 yborder:1px dashed #000; ' J S. c5 t, v) ^
} , J- e f5 `/ H
--> - x# n+ y( z/ K/ K; q
</style> ! q7 i) [' T# p/ s: c0 @; ?( r
</head>
G, V3 ]/ B$ U4 l- M; c<body>
7 j7 `6 J" |: H2 E<div id="pic"> " P5 Z" `" y& b. K5 a
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
$ z; m9 l- g8 N/ f+ O" }% r</div>
0 g4 d% E& D5 r8 s: a' p9 E- H</body> 2 j5 f3 B& C+ V' a' z
</html> |
|
发表于 2007-12-8 14:55
| 