|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14437
- 金币
- 2504
- 威望
- 1647
- 贡献
- 1452
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。; r# u8 a. D3 q3 r4 [3 c2 l
关键在于：max-width:780px;以及下面那行。
`* k9 F$ J. ]1 J+ C. ?固定像素适应:
7 [, @0 P6 r Y# }4 F$ z9 n }7 R: Z. k0 G) ^0 B W
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> 以下是引用片段：
* Q9 {; T7 O i d$ l3 f2 F4 y<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 0 P; U% P: A: A! _
<html xmlns="http://www.w3.org/1999/xhtml";> . q4 K( |& ]& `* L6 I4 W0 ~$ ~
<head>
. } `1 e% d, {6 q1 V<meta http-equiv="Content-Type" c />
" ~+ l) i1 t9 m- S8 \) ^4 \) V<title>css2.0 VS ie</title> I U5 r+ @5 g! W2 U5 A
<style type="text/css"> 5 u1 y: \; ]- E
<!--
% A: |( E* r- ~9 y0 Rbody { / }6 l! _4 N& r) ^9 R M% |
font-size: 12px; 2 w5 m. b. M9 l" m9 X! I
text-align: center;
1 |; y+ S# f4 i( Dmargin: 0px;
2 h1 |8 c: [3 j! d! c6 L$ k& S9 s& npadding: 0px; ' { Q7 Q$ o& z- @! \! `
} , \7 ?7 h/ b- n' ~( v, M
#pic{
! o' |& p) k/ b0 O margin:0 auto; 9 C* K `! {" K& V8 H2 x- J
width:800px; ! F# y, S! X" H8 p5 b
padding:0;
7 y8 c) f+ w7 ~( l6 j. k border:1px solid #333;
. R( K& P+ K) s0 h R } ( b; i" |+ C) R5 t: @+ L
#pic img{
3 E/ b) l! `# J1 V7 X max-width:780px; " S3 D+ G) ~- A0 `: }$ d" I
width:expression(document.body.clientWidth > 780? "780px": "auto" ); * `* B# C$ B: M' Y$ f9 b
border:1px dashed #000;
7 |; C0 C9 a& `+ C0 l9 b}
4 ]+ H. t7 g3 n7 a# m--> 5 ]5 t$ R: l* C, U
</style> ) k6 p4 |0 T+ X, a5 t
</head>
( W0 ^* c3 l5 { {9 K4 i G<body>
: R, D" N; S6 `& f$ n2 S6 r* i<div id="pic"> ! D4 V4 \" {# l$ G5 v
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
( `2 w6 m/ u. m" l! H+ L: y2 P</div> O3 H9 U7 D/ q* f6 _' {9 U1 R$ U* ]% p
</body> % D; k5 W) Y$ Q) O ~* E- u2 b1 A
</html> 0 X. J* ?0 }6 c# j9 g
% {# [& T6 D( Z9 e, i3 h" O: {
百分比适应:
0 x2 @1 u% N4 B. O5 `3 K以下是引用片段：5 P9 t' C* [% y4 _" z1 G+ v! r4 G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 a% J; g7 m* ^- U$ U# x& z0 m
<html xmlns="http://www.w3.org/1999/xhtml";> 7 b# D/ B5 z% q# T/ a$ P; @$ C
<head> 5 w& j9 A9 b0 Y( D# N; p
<meta http-equiv="Content-Type" c /> ( A* l" y; I0 v6 m* ?, g
<title>css2.0 VS ie</title> # n# n, L1 o4 ]5 q
<style type="text/css">
; A4 Y' H/ G% U& q" r3 r<!-- ) ^4 a4 M) j/ ?9 Q
body {
* f7 R. `- Y6 r U4 \2 lfont-size: 12px;
" C& T6 T1 u- W2 R6 Btext-align: center; 2 m+ T2 G7 G8 U( J( N; K- c
margin: 0px; ' J5 ~! s9 b! l) @+ S+ t+ O
padding: 0px; ; k. e, v+ U3 ~; D9 i% F+ K
} / d! b; f. F+ h/ H h6 I" `
#pic{ I# R3 M' f! X4 W! D3 \
margin:0 auto;
, ? Y# \9 f3 e: ? width:800px;
7 ^/ U x0 F# L9 p8 k, v: e& M0 ? padding:0; ( y; G8 _3 m/ d% G: \7 q
border:1px solid #333; 0 V* R0 |/ g. D4 D
} 6 Q: p3 U! o* G7 o% n; T# I9 C Y
#pic img{
: t% U; H" x% ~4 c max-width:780px; 5 K$ V( x) ]) y) Z l% P8 u' ]
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
% c# t5 W5 y' @5 H3 D, Bborder:1px dashed #000; $ m f4 m+ Z/ Z4 o, r( N' _1 R& l, D
}
3 k7 ] H5 N" A4 A--> 3 {' W2 z ?" ]% t9 c, K
</style> 4 ~# V; S1 b$ I0 m" O
</head> - J8 Y; I9 L7 l6 `
<body> : e$ a K+ g. T9 O y" E
<div id="pic">
0 f2 ]" `4 R& M# y<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
& F% q8 i8 \) u</div>
; f% |, h8 n' T+ J* C! L</body>
" H) R' h) b- M* p6 K$ z9 U</html> |
|
发表于 2007-12-8 14:55
| 