|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! W" z, u; H! d. I: S9 X2 t' s+ f% k关键在于：max-width:780px;以及下面那行。
. @, k8 \0 I$ h1 L固定像素适应:, K; R- z; w) B: k# D
2 u, I r$ g, D3 P0 _1 Z" u. ydotted; 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> 以下是引用片段：" h+ |# J, y- ^' E) I {9 s4 K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 a, P7 ^# F, C2 [6 u<html xmlns="http://www.w3.org/1999/xhtml";> 4 P- k4 e( l L+ p; h' j
<head> / k M0 B: R# ?$ }
<meta http-equiv="Content-Type" c />
- _2 Z6 V E; c1 S4 s<title>css2.0 VS ie</title>
0 d( Z+ ~- i2 z! N) [+ @4 {) Z4 ]8 a<style type="text/css"> ) ^: b" E7 a. }3 |& J2 {% Z5 Q1 t
<!--
# J5 k$ c' _4 C! D7 o6 b& h# ^body { 0 P3 w w( Q* T" q7 X; b
font-size: 12px;
- h* h, s' G% R& f" @8 ntext-align: center; , P. {- | [9 q6 I1 e3 b
margin: 0px;
2 r5 R: y% X; h, I$ q1 Z9 }padding: 0px; 3 W/ d) \+ O2 E/ t0 a
}
2 ^2 P, E, c7 f' M8 p#pic{
' O. A+ ^7 h$ i8 @- x5 C margin:0 auto; 2 x0 q3 r, x) a; m% I: W8 l
width:800px; 4 D) s3 P6 T# c1 q( X6 ?+ f
padding:0; 9 V7 I" g# H! s* C$ v8 P
border:1px solid #333;
) r. q3 _/ M2 ^) }* D+ L# K0 p" b } # M" \& K, y( Q' f7 Y" n: T
#pic img{
+ [& F. P. w% S. ]7 b max-width:780px; , O: }3 I5 u1 ~% r& C* e
width:expression(document.body.clientWidth > 780? "780px": "auto" ); + m5 {( p0 b4 f0 Q3 _0 }& T* T+ e
border:1px dashed #000; 6 R) I4 ^3 z: H
}
3 N1 Q3 z7 V- ]--> " i' P# d+ C6 T7 y2 k# @( P' `! D
</style> 7 L$ S8 ^# g K% C6 f
</head> 4 {& A4 \. g g. `0 ?
<body> $ p; O% `# k: y* r0 t& ~
<div id="pic"> + ]9 E- _* `/ m1 G
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
" G3 n& r) [3 I8 o</div>
" V% }! m% A. P, k</body> # n7 f X4 h: H' W
</html>
- c0 n" |9 q& y3 m/ F$ \, l+ e) ^. F l, D
百分比适应:4 y# e9 f' R) M d" r# w/ U' @) D* t
以下是引用片段：
7 v. B. s7 k- B2 Q<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 0 \& \) d h) E# P1 x4 E7 _) P
<html xmlns="http://www.w3.org/1999/xhtml";> ; J4 f0 j+ N7 w' w) B& w6 l
<head>
: X- ~1 D5 Y8 O! {3 o<meta http-equiv="Content-Type" c /> 9 s' A, n- |. V" a( g2 J- g
<title>css2.0 VS ie</title> + k5 Y8 B: b) R( v
<style type="text/css">
0 v/ }! H1 y$ P, ]<!--
1 N' b4 c3 P& T( b9 \( vbody { 6 p6 I" ~: \- Q7 E7 O
font-size: 12px; 0 g' o X* w/ {& C# l F
text-align: center;
7 @, a& g3 ]4 o" a. z( Zmargin: 0px; # z$ C. u9 M' }9 \ \) z( K
padding: 0px;
" G$ B/ N7 }. Q! Y( t f} # i) ~0 y5 i) g& J. R
#pic{ 3 v- g: o3 O1 z" X2 J' @9 U! m
margin:0 auto; 1 F# c' B, M7 O: y0 P
width:800px;
! N* E! o' O q# r; K padding:0;
& s" n% H( o* a9 I, e# R border:1px solid #333;
+ \: v8 R* e1 w2 l' V7 f } - b8 ?) C* [+ X) S
#pic img{
; z# |! e8 `0 m+ Y6 E4 e5 X2 s max-width:780px;
7 ]7 U+ I/ @) K5 }width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
w( |. K1 N* H- @7 Zborder:1px dashed #000;
" b1 m9 p5 d: _6 W} - n& X& W+ p4 G% W, ^
-->
& I, J% F! e$ J+ i' z6 O2 P</style> $ h( H) `$ ^/ Y+ a4 I5 o
</head>
. X7 `5 H8 x3 o. U6 f8 C- b<body> + L1 ^; b# H# X" j
<div id="pic">
! W& Y! @& [- d8 u<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
9 n, L. y; \+ ?& X. v# y</div>
# s, U; c6 n* Q& k U6 Q</body>
6 N/ r9 m. e q& W- _/ H9 S6 Y</html> |
|
发表于 2007-12-8 14:55
| 