|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14431
- 金币
- 2501
- 威望
- 1647
- 贡献
- 1449
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。8 A( r( X3 w' k: t5 H6 X6 q
关键在于：max-width:780px;以及下面那行。+ K3 i% H; Z5 V2 s% x
固定像素适应:
$ H/ X, \0 i$ Z: C0 Z& y# S
3 F" D3 v8 K2 Z. M6 \$ [$ S2 Fdotted; 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> 以下是引用片段：
9 ?9 f: {- B0 l6 s4 k! H! e<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> - Y; ~8 S) }' a3 @
<html xmlns="http://www.w3.org/1999/xhtml";> K. J" I% r; z( m7 H6 A
<head>
h# `6 ~1 W+ V8 {+ j4 d<meta http-equiv="Content-Type" c /> . T5 |9 I, D x4 e
<title>css2.0 VS ie</title>
* X1 c3 Y9 b1 i' @ \7 u<style type="text/css"> 0 d4 c; _8 s: @' O. A- Y
<!--
3 _( A7 e& P8 s& Gbody { # |+ }( `. l6 c( M: e
font-size: 12px;
0 r5 B7 c, W! q) s4 K; qtext-align: center;
5 l+ z4 h" g# c. z+ lmargin: 0px;
! ]& X, K% @8 s6 mpadding: 0px; 6 ^" g7 r3 j" H, O1 @$ I
}
6 g+ B$ k* C: J0 ^0 c" o& ]#pic{ 0 @+ b* }; j7 T. D6 B
margin:0 auto;
, p7 L& i( b+ Y& s* M width:800px;
( O9 G4 ]9 V" F; L) G padding:0;
9 J* r" g+ u& r5 B8 {8 U7 ~4 ~! E border:1px solid #333;
t2 p' ^6 s8 z1 D1 ~& l }
( r1 @0 n1 |3 Z8 a2 L+ _) u, F+ o% ~#pic img{
! ^4 v+ u. }) i* B0 ~ max-width:780px; I9 a1 a. O0 _- z1 `3 \+ C" W, ~
width:expression(document.body.clientWidth > 780? "780px": "auto" );
' o/ j" j2 D8 Z+ I% p$ g+ f bborder:1px dashed #000;
p$ b) h! ]5 c9 X) I! I& B}
/ E! o' E. K) ^. w. \& w- c--> 5 p( ^- X" X; G
</style>
+ X7 r3 j1 v8 E9 f0 h, N# r8 W) W9 m</head> * Z, `# f. @9 S, v: a% B
<body>
8 W3 ]3 U m1 H5 T) Q$ l<div id="pic"> % K0 p2 C% j. }4 m0 ~, F2 N
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
) N9 q5 }" | \/ M" F( R5 [8 j</div>
. q& @! G) _+ d& R% C. L7 U8 ~</body>
+ v5 ^1 X* z9 H</html>
# j0 X* W e* Y$ Y0 q, k+ A9 _" u5 y& n
百分比适应:
+ d* m% Y2 C8 B: W以下是引用片段：
[% J: N/ l2 n8 l: N. I. G5 I<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> $ H7 A! b! |! J3 T, A$ G
<html xmlns="http://www.w3.org/1999/xhtml";>
8 l/ E, a. [$ t& g( ]& L<head>
0 }/ M3 x4 i/ A; h<meta http-equiv="Content-Type" c /> 0 n( C' @; Q$ X0 u+ d
<title>css2.0 VS ie</title> 1 ^4 b& F- Z4 K% Y( } y
<style type="text/css"> W* ?1 i5 d5 I# ]; Z
<!-- - b5 N4 ~7 X' k, l. C8 ?
body {
0 r, I# y- F1 j' ~2 s& V7 tfont-size: 12px; 4 o' Q3 C/ }: Z! A m
text-align: center;
8 v+ Y1 T( q3 E2 h/ p! f3 _margin: 0px;
* i$ A* A: G) Ypadding: 0px; ! V: M* l/ q, ?* r% r5 W8 a4 e! P
}
# s- W. K) A8 d ^* G& O( K, Y#pic{
9 x+ S$ |% e v margin:0 auto; # {) k# n% u) X7 C: K8 h3 K
width:800px; 6 n) A" y! x( v x& W, Z, n. t. Y
padding:0;
+ Y: j& M+ u: E; ? border:1px solid #333;
- k& M( p" p) v9 x, e" r& t1 S/ ~ }
# P; I* l+ @- u4 n L3 T: v#pic img{
2 U; s. k4 c3 t# r& \% j0 F8 b max-width:780px;
0 C. R; r% R* w1 Hwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 3 d5 u- r/ ]' j
border:1px dashed #000;
( Y9 Z$ |& D+ v" f5 C! X3 H} 9 i" _+ ~+ H3 R; U- L: D
-->
& c0 Q; P* p+ C0 w7 r</style> 5 v' A6 j: N) r* }( b$ ?
</head>
% E- A% v2 e" y6 f<body>
) I! a7 K5 _: J* J<div id="pic"> ( W; z7 g: S1 P0 R1 k2 i& H7 i4 V
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
* }. w; A# J0 `5 [% B</div> 3 b+ `5 w' y( R- p/ _4 L9 N2 K# t
</body>
% L/ J R3 v8 ]: g, C</html> |
|
发表于 2007-12-8 14:55
| 