|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。% a# q6 G5 L2 ^* B
关键在于：max-width:780px;以及下面那行。
3 F- E" l1 Z+ C( h, C& v* Q固定像素适应: I/ M9 p7 N: `* A' i4 Q
. F) D# O n2 \6 _: y
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> 以下是引用片段：( G4 c0 j/ ]. z9 G$ K% W6 p0 H2 W) U
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> $ o5 b! P" i& w H. w
<html xmlns="http://www.w3.org/1999/xhtml";> 3 W, f) C1 q* R5 h. j# l$ y' D
<head>
4 T3 M' J0 ]( K8 x0 p0 a9 H<meta http-equiv="Content-Type" c />
% W6 O) `4 E, P |4 ?<title>css2.0 VS ie</title>
& K5 S& A& o! g! w8 S4 Q- {3 Y9 h<style type="text/css">
) e+ }" {1 W; ?, g3 c! v<!-- & n! N5 U/ E# }* v _' ?1 Z* T. C: @
body {
, L9 N- @- E5 z) m3 w( R( D3 X% ofont-size: 12px;
, _+ q! U: R* t5 v- y6 p* @text-align: center; 6 y! n0 M! @' V, w9 J6 u
margin: 0px; , V1 d" E2 l7 Q1 R% c! Z# n
padding: 0px; 9 {% s/ j/ `. K: [
}
) R5 b$ C/ c& F1 f7 @8 o9 @#pic{ $ W0 p" q3 ~" Z* o, g8 ?) s
margin:0 auto; 5 v3 I; b, e) V e0 W3 J
width:800px; L- Z: B0 R' w1 X: w2 {) F
padding:0;
) s9 G5 D- e- u- d0 `+ | border:1px solid #333; + Y* m0 h6 J( `& o0 s1 ?* G
}
. {6 r7 R% }; k- r! Z, {#pic img{
( G3 ~0 k+ o# m7 g4 X. D max-width:780px;
/ h: R1 n' ]! t! y D3 Iwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
5 I& X, @9 i6 P, I7 E, t. \8 Lborder:1px dashed #000;
- n$ `* O& k8 t, U, e9 t3 D} 4 B/ y4 X& |, w' h
--> ( U5 @* l+ N2 P; |7 H& K
</style>
. }, B6 D. n" O</head> + E! S$ z3 ?: [5 ?- X$ ~$ M
<body> , r0 G1 T2 |1 H2 r J2 p. T. }1 ?/ H
<div id="pic">
! _- \8 `- z3 x2 {$ Q: L, T& ~8 f) [<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 2 C9 {+ \5 P, X0 H( O0 Q
</div> " K! j" b7 k' W9 a4 R
</body>
! o& l% X" z' M! N( L</html>
& f# t! ]3 k' j, b/ Z/ F. B) ]- _& Y: i% T; n
百分比适应:
; J s! Z" P. `# o以下是引用片段：
+ X8 Y! Z! C& Y<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; x2 {& s" ?* {5 Z8 i<html xmlns="http://www.w3.org/1999/xhtml";> 1 s# y- g* U* r( l% ^
<head> ' p% s6 `9 m$ d3 X
<meta http-equiv="Content-Type" c /> # `% p7 p2 V7 b- q5 u1 T0 G
<title>css2.0 VS ie</title> ; p4 h0 g+ Y! _" W7 I8 x e
<style type="text/css">
$ b0 ]. j. X o: G<!--
5 h% b$ G( x. }" Sbody { $ h) O) s4 K: e! _
font-size: 12px;
; W# m0 i' f* Z# Q5 g6 B; Ctext-align: center; 2 `- |# U0 B/ Y% j2 t
margin: 0px; T3 e: F. F$ m$ U7 V& I+ t7 N
padding: 0px;
+ o: p/ V9 m& | ]+ U} 7 u. k% I% e* K! N- ?4 l
#pic{ 7 m$ d$ J1 x7 H1 f9 K; n3 e
margin:0 auto; 3 u# [9 g- q# P6 M; L4 {
width:800px; ( E, A6 _: w& D9 x
padding:0; ) G: B8 o. A- y) m* F) v1 Q% J
border:1px solid #333; 3 ]5 C2 }) d$ g
}
! M' P# f9 }9 B, T8 [#pic img{
, w9 u- n7 g9 J; A( _! G max-width:780px;
. w8 K. k2 F9 l; k3 Pwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
c7 i: b. C ?, b; D! B5 Uborder:1px dashed #000;
1 z$ e4 S# Q: a% F$ W} 6 W2 q) o5 Z$ M3 d( D5 X$ i
-->
- z& W* ?* p6 |</style> * w) A7 ~1 k* n1 K8 Y: |
</head> 3 v h) N5 e0 G: i
<body> ( U1 h/ a; h8 i# @
<div id="pic">
2 J" H9 ~, w( v z- ~2 i8 ]& n N<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
" A# N, @3 \) Q% m) v</div>
% ?% p. b+ x9 n2 ]) X; V9 Z! u+ T</body>
6 T( {' k3 R* Z/ |; G5 V9 J</html> |
|
发表于 2007-12-8 14:55
| 