|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14375
- 金币
- 2473
- 威望
- 1647
- 贡献
- 1421
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。/ f$ x x/ D9 Q$ X
关键在于：max-width:780px;以及下面那行。, u: p! B6 C& R! H* l$ Y
固定像素适应:4 Q' @7 x: T7 A9 d, M
9 t; S+ x8 F! B) U5 {9 N/ Z' P4 rdotted; 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> 以下是引用片段：
4 K& q S+ ^& s" H$ A<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> # E, f% J- x- u: C1 r0 l
<html xmlns="http://www.w3.org/1999/xhtml";>
+ n2 _. i8 \+ ]/ I+ ~<head>
H( ]) l2 p! i) M8 }- X8 |<meta http-equiv="Content-Type" c />
' x. S$ N/ p Z<title>css2.0 VS ie</title>
, { H1 e2 m9 j% m) a5 W0 _<style type="text/css">
( w, [3 f# R+ ^& Q; h4 U K* n1 l0 _<!--
; k- t- u. @ a9 X- ebody {
- T6 ] V) g O( g" s) ^) W8 e$ Tfont-size: 12px; & J/ L7 a1 [* z! R' ~' q
text-align: center; + k. Y8 H& K& D2 b
margin: 0px;
! H& U: Q0 J8 [' Z9 Y& p) Tpadding: 0px;
U" v6 `* l' i- h} 9 \2 r* a1 E! l) T+ C
#pic{
; S) c. G! x( i7 t& \* \' Y* A margin:0 auto;
: m: c6 B5 [$ `2 H' k& {/ h9 A, x width:800px;
: K% [* A. ]/ `; T padding:0; ) H. A5 P7 h* p& P$ L! t: F
border:1px solid #333;
5 w4 u; p/ I9 L! q6 X } ! i$ C2 o: G+ [
#pic img{ 6 _" h5 N0 p; e* M+ L# N
max-width:780px;
- O& l9 o6 }7 ?2 P1 C M+ [; e8 cwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); , }0 a. z: r" \
border:1px dashed #000;
% P! g% {% Q& F+ s) `}
: w8 |3 y. [6 P; Z+ O" ~1 c3 z-->
6 k4 ^0 ]3 @4 q; {) w& m0 M8 |9 U& t</style> $ {; a$ h8 f l k; T, b/ p
</head>
% w! I, }- ^) [9 y) U<body> 7 J* p3 f- u7 f, i: A
<div id="pic">
0 S8 q& i$ e, `, e7 S<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ; S8 O0 G- W; T* n+ T2 w& l1 J3 X
</div> ; D4 u6 I* c! Q5 |
</body> * P" Q& d6 @3 X8 a2 ~# r; A7 ~! y J1 d% s
</html>
# K9 W; U$ c& m6 R4 M p) `$ c/ ?+ m! k, b
百分比适应:* x5 R% p0 p! K
以下是引用片段：9 F4 d+ W' Q5 u @+ ^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 L0 W2 W6 \9 h* G9 d$ ]0 o8 }; C<html xmlns="http://www.w3.org/1999/xhtml";> & x" [2 I9 s# v7 \
<head> 3 @) M/ Q& _& O+ I; {8 @
<meta http-equiv="Content-Type" c /> ( r! ?9 A! u& L% E' ]8 X
<title>css2.0 VS ie</title> / q, Y/ h% N' E4 ]9 P' a
<style type="text/css"> 9 d8 T* \4 X! H$ [
<!-- 8 l3 ^- G5 e3 E/ _0 N8 \/ F& P4 O5 }
body {
' x/ s$ M$ }, Z4 Lfont-size: 12px;
7 ]: ` u; t6 W7 vtext-align: center; ^- W7 h8 P3 Z0 E3 L; a% k7 V4 M
margin: 0px; * X4 S8 o, H) F/ I0 U: q% X
padding: 0px; $ r+ H6 e: i* p7 D, g
} - r7 f& j4 b) ` z
#pic{
% e! J7 x) W4 L5 ~1 t margin:0 auto;
# p0 f+ D* {) {; w- C A width:800px; 6 h- f& ^7 C8 } S" v
padding:0; # o& V' y4 K4 z' p N
border:1px solid #333; ) H7 F! X8 e1 j/ X
} + |) v+ ~' F6 s {8 ^: M' T
#pic img{
' o: i/ |5 E# \& G; y5 t8 p! [ max-width:780px; ! p6 X2 _; ]: p5 U" u. }
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); : U& l) I1 n$ d+ H+ e- x
border:1px dashed #000; ; o# y; H% C/ a/ ?4 k2 {- m' H$ E
}
- k$ R0 r: u/ Y5 h$ l/ L6 f/ L-->
4 e$ ~% h t6 t" m</style> D4 L6 w r$ o% u+ [: y0 [: c
</head> 0 t1 I: [( o+ I
<body> 3 F, }7 H7 O5 `$ B
<div id="pic"> ! L& i% R: h. C) X9 r: n0 c
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
" s/ B. j) r* l$ b/ J</div>
# T4 k h; J5 |8 l7 k( B</body>
/ f. V$ J1 @7 a/ j. p</html> |
|
发表于 2007-12-8 14:55
| 