|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。' E' C' H5 b; A; x" ^( l
关键在于：max-width:780px;以及下面那行。5 }4 D& V/ c" I9 b
固定像素适应:6 ^- G% v, c+ R1 F# y
6 ^+ M' L* M/ Z; l% ]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> 以下是引用片段：( F) V* F+ F g( p! X z# n& l
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& R1 x: v- e3 e% O- Q. Z: z<html xmlns="http://www.w3.org/1999/xhtml";>
; ^; x; E7 ~" r6 C<head>
9 [- w0 d) {8 P2 k4 }$ k8 u<meta http-equiv="Content-Type" c /> % q4 d0 n- A/ U( i- ~
<title>css2.0 VS ie</title>
. @* U- E2 Q$ a<style type="text/css">
) V- q) t: f7 I/ w) h, I C4 A( Z' K5 N<!--
2 x; o6 G- a; `8 j2 ~1 xbody { 5 q6 U( z* m* Y& |. W
font-size: 12px;
$ b. F* _1 j8 Ftext-align: center; " J1 Y& e1 ~7 |4 |0 g* o# C
margin: 0px;
, W, q% `: O6 mpadding: 0px;
% C( S0 h; W# ?6 b/ S4 i}
3 x* [$ b @7 |- R9 [$ r$ s#pic{
; \7 T+ t. v$ F& z5 Z3 z; @4 T2 r margin:0 auto; 7 Q- v; @2 e3 x+ d; h
width:800px;
6 B3 x7 U* w* G( L a, V2 l2 W+ k padding:0;
( O+ c. n# H% g3 V) @ border:1px solid #333;
% H1 W; v6 `3 g T: D! I }
& z" m% r. e3 K6 ~" K% O& l) S/ o; {#pic img{ ! D- }- ~6 S1 B! Z' D
max-width:780px;
, \' \. L8 o z: uwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
4 d5 i3 U$ c# G3 e" G3 u3 Jborder:1px dashed #000;
/ J) o0 e% b! i: h$ W% t$ q} 0 o) }8 n t+ l8 ?! G/ T( D/ q; R3 X
-->
. s2 t S( ~) D& \6 R</style>
! c& E* w# p. f; o- x1 x3 A; u</head> ) N7 S/ k2 n, g: P. r$ o2 r
<body> . T/ }' Q1 ]5 p6 w6 h
<div id="pic"> 8 h0 E2 k" N/ F2 {8 z
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
$ z) |9 P# h- L1 A9 J$ S- {3 g</div>
/ a. \& m; \) c/ M</body> % M3 S3 I" n# p& H2 z
</html>
) p: [1 T' Y6 @/ n$ b W0 @: O: i$ I$ t% E
百分比适应:; \) t5 F* F. o8 t( Q# f2 _4 Z1 R
以下是引用片段：
6 P8 K- W/ {8 p: Y<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; F8 J- _9 `3 l/ p' C. H3 a<html xmlns="http://www.w3.org/1999/xhtml";> 0 i5 C6 X# I/ N: A/ U
<head>
! i( T `+ |) t" f<meta http-equiv="Content-Type" c /> 6 ?! A- y" v2 F0 p
<title>css2.0 VS ie</title> ) ^0 x5 z3 ]& e/ Q
<style type="text/css"> 9 z+ ~' s3 y- c+ Z8 C X2 v& V3 z# w/ Z
<!--
% f, M5 T* j# L" @* ?. K S5 sbody {
2 |1 d! d/ I$ K+ H, Qfont-size: 12px; - U6 r: _" a& O9 ?- r# a- p
text-align: center; " G( C+ W. |5 N2 W8 v! o
margin: 0px; / i7 H: ?' Q$ z8 w+ O- N
padding: 0px; ' c8 Y r! @( ~/ a
} 5 W0 |9 ?1 c. ]: A6 U: }
#pic{
4 F: B6 ^; R- u7 [6 ]" t, @3 T; j margin:0 auto; / V+ H/ s8 D" h( G# U: Q$ c
width:800px;
% f. a! _' u0 V% F ^& A& X0 Q; b padding:0;
7 R& J- O/ ?- [ border:1px solid #333; 6 L& W0 S4 K% h; N' J h
}
& Q' _1 c, r) x0 T9 h( o#pic img{
5 s# t3 R s/ a6 j3 _ max-width:780px; 7 g6 K, V2 v+ t- I
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 6 N9 Y6 m9 ~3 Z
border:1px dashed #000;
: _9 N9 A9 {) F; z% P" ?) x4 S}
4 p4 |3 f7 F/ m- n. {0 Q-->
4 ?% ]; m R, G( ~6 l+ f S, u</style>
! _9 _$ P' o# _: R/ z4 y0 c5 W</head> 4 V% D0 {% l9 a1 n! q9 i' }) Q
<body>
9 a, d. ~& M/ p5 w+ c! q<div id="pic"> ' o7 b$ D, P4 ?- `. w- E
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 6 G2 s; c4 x& ~$ Z3 p* g8 o0 D
</div> # v$ i$ q- s. X8 l, T
</body> & n- S& g8 t# P4 C8 h; `4 B: |
</html> |
|
发表于 2007-12-8 14:55
| 