|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14329
- 金币
- 2450
- 威望
- 1647
- 贡献
- 1398
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。" s. B$ \6 t# q; \1 e
关键在于：max-width:780px;以及下面那行。
9 R7 r! E' o8 Q5 K固定像素适应:( e% Z7 M$ T; N
4 o( q! I& ^ H( f2 w/ B& Adotted; 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> 以下是引用片段：' N$ P4 E& b; M( \* `( _% h
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 k9 d1 `* j, K4 u. Y<html xmlns="http://www.w3.org/1999/xhtml";>
, T& Q9 ~0 T( z( U f& [<head> ( g" g' o- d4 P- Z) N8 B, |7 Z
<meta http-equiv="Content-Type" c /> 2 A% f( [8 x* f% C: u4 g* a
<title>css2.0 VS ie</title>
; D. R. w7 Q9 k+ O1 j2 Q<style type="text/css"> ( [0 Z# T" J6 f7 z% k/ W
<!-- 0 n- Z' n4 L4 y( ?
body { 3 j$ C% ?/ s& t7 x9 a' w
font-size: 12px; 9 g; ?" b8 g! s
text-align: center; % j* R W0 C7 j# n& O3 ~/ w
margin: 0px; : {1 C- @. R( u& y' t/ P) s
padding: 0px;
6 K9 [+ [" T% {8 a3 Z- t}
7 l2 B0 G M6 ^7 u, W" Z# V#pic{
+ d& K3 B/ J& L |1 d" Y$ e1 L margin:0 auto;
1 G8 r* J: ?! _+ T, @& h width:800px; 6 u; _. r& B5 o1 Q$ r( w% f
padding:0;
" Z0 t% M5 ~- E& j: `+ x1 w border:1px solid #333;
- u4 l. ?/ g0 X; }9 P! _ }
# C/ O( \0 C, n( Q#pic img{
. |& d: H, C+ T; [ max-width:780px; - }& Y1 d5 z: n7 y n% ?
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 9 S9 N% B! e1 s3 k
border:1px dashed #000; 8 g# Z Q3 |, k1 h" e
} , V# b8 J2 J4 ~- Z8 p2 K4 s. @
--> ( Q/ t, h3 N/ b8 Y& I, \5 R
</style>
q. a T; w0 L</head> L" F) { D+ y! {/ X+ Y+ \
<body> 9 O, n6 N0 g0 m/ F
<div id="pic">
4 q* Q* `4 m+ Q3 J( @! ~<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
# h/ @( Q3 l6 q e$ h$ w</div>
/ B& H! I5 d |! s1 z' A. T</body>
2 ^! H' a* j4 X S) Z# n9 r b; M</html>
- X- f$ s$ E6 h- l! O3 e1 n8 ~* M5 Z6 _
百分比适应:1 y3 m- B9 J* z1 s
以下是引用片段：
3 K: _; r5 N5 D) E2 P& q<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . F. y; f9 U! p0 d
<html xmlns="http://www.w3.org/1999/xhtml";> - M/ Y- w& t# @* {
<head> % I9 c: \$ e" H
<meta http-equiv="Content-Type" c />
: M V+ R$ c6 H( g3 S<title>css2.0 VS ie</title> 8 O! @- t/ W1 @) ]6 @4 }
<style type="text/css">
' Y% \6 `- }# A. t7 X" I- X% d<!--
: p: G( Y$ Y" i) N( a. T5 Pbody {
; U% e( ]# ^+ v1 Cfont-size: 12px; - M9 i9 H9 } y ^
text-align: center; ! s$ \6 F _! F( n$ |
margin: 0px; % I" d* W% G8 S: R8 k
padding: 0px;
+ u$ p. u9 Y' w& @} T7 l8 D6 V, a* _& T
#pic{
% I0 G3 b' l0 i6 c8 k) U margin:0 auto; : d) W( T3 g8 [* E% }: D+ u
width:800px;
3 P4 k! ?! H; {% L* p% s0 b padding:0; / a0 K; y* `9 V/ y/ q' }# f& O
border:1px solid #333; 4 r$ W- ?! l- F: @. v- j* F$ q
}
2 v& L$ @0 H3 N1 ^% K& G#pic img{ : g3 n5 v# r+ V
max-width:780px; 8 I) r7 b( |/ V c" O: Q
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 0 X: p2 A( [) Q1 Y3 I8 T& o, s$ [
border:1px dashed #000; . @8 K6 w+ _7 c- d' g( ^* }
}
T. Q' i4 K( C-->
+ T8 ^: H5 Q- b9 `& e1 O; c</style>
3 I# Y, Z7 i/ L& n/ R" ]3 F2 ~% Y</head>
# m2 q- \ y# I+ ^1 ~: J<body> : s) c! F1 b( H' V, C& {
<div id="pic"> * W, W3 ]5 ^0 ]+ B g4 V7 ~
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
4 t* e \3 w& s! v7 ]</div>
# @3 ~7 i- M: A; U</body> 5 Q* N6 k; b% j! Q1 n$ w
</html> |
|
发表于 2007-12-8 14:55
| 