|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14417
- 金币
- 2494
- 威望
- 1647
- 贡献
- 1442
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。2 p3 @$ H0 k# ^! c+ c1 Q5 R
关键在于：max-width:780px;以及下面那行。
$ s3 a$ F q7 X9 v! Q' Y5 e5 H固定像素适应:
$ E' z* P2 j( |. k
7 A! `8 q' `0 O$ f) W3 e' \, Cdotted; 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> 以下是引用片段：. j7 c2 d# H }4 U
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> , a+ M$ p0 R, }9 p6 W x! H+ q# V
<html xmlns="http://www.w3.org/1999/xhtml";>
1 j, H; N" X2 J. W% G @6 n, a<head> $ g$ B' e6 Z. j! _7 c
<meta http-equiv="Content-Type" c />
: C; }$ F' ~' e7 i, d& }<title>css2.0 VS ie</title> 4 Q/ i' |: ^) [9 `" B
<style type="text/css">
/ @& D' F8 g! j<!-- ( |# `8 V4 A2 ^2 g1 ~
body { % ]0 o$ R7 |% ]! i2 U
font-size: 12px; 7 N: ]5 Q0 y* Q! r1 w& H. F
text-align: center;
; o q6 a7 C a amargin: 0px;
! ^3 j/ u3 K J# j: ypadding: 0px;
2 U* N. c$ \; N; M: F0 m7 V1 o9 C}
5 q7 Q/ E* B* J% i- l#pic{
4 ~' U4 T& O/ E5 m8 v. M margin:0 auto; " h5 N$ d- h+ X# K
width:800px;
4 s! f6 y" r: P5 |$ B padding:0;
# z0 l, w) m: S$ j0 m7 {0 V* i border:1px solid #333; ! _( W/ n! k2 J `5 Q1 @ b' N9 S' m
} # e e$ G2 Q1 U8 q) { i& a
#pic img{
2 C5 ~6 ~( B$ b; Y8 Y max-width:780px; ( w" T1 \+ S9 N( E. P
width:expression(document.body.clientWidth > 780? "780px": "auto" );
) \2 `; a9 ?# G+ Rborder:1px dashed #000;
* n" \$ F" ?$ H. X0 _7 X) N} ) Z( \: q) F8 h6 i% t; x
--> " ?: J; ]) l* }1 p* t' l3 q# H
</style>
# E7 t, E" k1 D9 h& J</head>
M# G! Y& ]; c<body> 9 f+ z& b6 v4 ^# }
<div id="pic"> Q: i' ?6 Z7 Y5 E# A
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 4 O. C( r& U5 F$ N7 x! ~* ?
</div> z$ c; d; [) E, k0 A) R- S! l
</body> ( e3 U+ C. H$ @5 f _
</html>
- h" B$ R3 Q" U( `; L
# q; |" Q, D1 Y5 Q2 e; B1 p( o8 C( B百分比适应:
' Z6 x5 g7 {! A! b+ q以下是引用片段：
, R' v9 I5 p: u) ?3 Y, ]; ?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ' i+ x1 O0 q( Q
<html xmlns="http://www.w3.org/1999/xhtml";> 2 v0 S5 V; Q1 B5 ?5 u& p# T" P
<head>
2 i: c$ P8 }7 ?4 k$ V<meta http-equiv="Content-Type" c />
6 i& E( t3 F. u. s8 y+ P<title>css2.0 VS ie</title> 5 k5 P" u) K; k" I2 m. e
<style type="text/css"> 0 S' c! }- B/ V& P+ I; E
<!--
( W. Z4 d! Q/ y7 Q; W7 Tbody {
/ I1 S! ^1 P* m& J! w i& pfont-size: 12px; 1 z) ^0 K( K+ D' U. N q
text-align: center;
( N. C5 U# g' S6 [; wmargin: 0px;
$ \- E R9 O; |! Mpadding: 0px; + G# a5 ^5 Y5 U3 C. U& f
} 6 p0 Y: f3 |# c( \; F' v
#pic{ + V/ K" a. H" g9 i* Q. ?
margin:0 auto; * s3 o7 _& U5 n( K, I' Y( |/ q, G$ l. s
width:800px; 6 n. [% J) F' b, ]1 R
padding:0;
! G q# ^$ k9 f border:1px solid #333; 3 q: ^- w! ]- n( F0 j* g/ T G; g% E
} 5 ?4 o& O0 N: Y
#pic img{
' ~0 b% T; ^8 D6 I& b1 \# B max-width:780px;
( j1 }. K% R) q. |2 }7 Y$ z$ wwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 2 z. ]1 p |) t' l& ]! ?
border:1px dashed #000;
1 E* F6 Z5 u c0 @}
F' E( j( T5 s" t( U! T-->
) D! h! m* z, P% ^6 L, p</style> $ `2 \9 N" q! q; q/ U+ _
</head>
6 d/ m, Z/ I: g0 v<body>
1 E8 c$ ]( Q+ d8 B8 u! i) ~" b<div id="pic"> 4 j) w& a( f9 A
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ! w! k W8 B* g3 a" g5 y
</div>
% h! t2 }1 K: k: _* }3 G0 X# X! @</body> 0 s2 T, f- ^6 h* ` W# f/ R& q) r
</html> |
|
发表于 2007-12-8 14:55
| 