|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。, C. k6 l6 |. x' z' `- {( K5 z6 ]
关键在于：max-width:780px;以及下面那行。! k0 M8 d$ p O) {, \% V
固定像素适应:
' K; f4 u6 f% ~, }) ~" n3 P+ U+ B4 @* \; f/ V: D+ }
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> 以下是引用片段：
" y% U1 d' E4 V- F$ D- w<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> * g7 c* h Z" L7 w/ w
<html xmlns="http://www.w3.org/1999/xhtml";> h* k/ Z( _% r g* m i V. n( n
<head>
4 [8 T" j- r- H* {2 j+ j. B# c<meta http-equiv="Content-Type" c />
0 r( Z4 `6 f5 H2 D<title>css2.0 VS ie</title> $ D7 i; |2 m ~/ Z: B
<style type="text/css"> . q4 Y* T5 T4 V/ A+ L& U& A
<!-- ; J( a; h8 M* M8 m x
body {
$ |0 N+ R6 Z' v2 k# \5 B: Mfont-size: 12px; ( ~$ s3 R7 c. `1 |
text-align: center;
! O$ i$ U& \1 w5 C9 ~0 hmargin: 0px; ; e4 x! J9 k% _+ u) M
padding: 0px; " t2 U: \- @$ P; }( w9 m/ G
} ! u+ ]4 D- `- O% F6 d0 ?" v8 `
#pic{ $ ?5 y3 \. J' N$ o" ]6 K& C
margin:0 auto; 5 l- S" y4 H- _ l1 r1 z; p
width:800px;
) `4 B0 }% L' G8 c- k/ ` padding:0;
8 w* T+ J" Y2 H- Q border:1px solid #333; ; L& K# `( B! X+ _4 J9 s* N
} 4 m7 L8 B# x4 {' _
#pic img{ + a; H% Q. A/ G6 a# I, f
max-width:780px;
- P4 |- ] `$ V1 c0 ]5 kwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); $ R" T, R4 F' B a+ b
border:1px dashed #000; 4 ?: G5 w+ h4 w, g* @) r, E0 Z
} 3 P8 R. N" Q& Z' \
-->
) l; j# Y3 q0 U( Q4 R</style> 3 W/ O9 a3 C( p/ [
</head> ' c6 |+ K$ B0 u; @
<body>
: Y; K. \8 I7 L J<div id="pic">
) \! C$ S# [* D7 I* N. v0 Z( a. ~<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
- g6 n+ u2 A% G3 @) E</div> % {. }: p( ?& B" M4 z! E% T8 t: [
</body>
- Z: J# p5 ~: p8 z2 |; M0 `</html>
; E J0 `7 @4 ~; ^ S
& I* a- q/ F1 F C2 Y3 i. e! U2 ~百分比适应:
. l( q3 Y, b A. Q7 {8 Q0 u/ b7 C以下是引用片段：
6 ^, t9 S* R* B: f" L<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 Y$ |# P! f. L3 W! f7 e. z8 Q<html xmlns="http://www.w3.org/1999/xhtml";> 0 h$ `, P9 d9 ~2 b
<head>
* J/ O' n7 {; x) m<meta http-equiv="Content-Type" c /> 0 S5 C& V) [8 @/ w' w- j/ w
<title>css2.0 VS ie</title>
8 K: a+ Q0 E j: m; C$ l<style type="text/css">
- o+ k7 f- V( N+ h<!-- 0 I+ Y2 v3 j$ i9 h+ ]
body {
& Q0 M5 [1 V$ {% O5 p9 ^- M2 Pfont-size: 12px; % e6 B3 ?" t7 X3 N: ~' i" @9 N( k
text-align: center;
e& ~2 n$ u4 q, ~5 A+ Bmargin: 0px;
9 W0 O+ b& {! o$ v7 T9 I4 A* f9 \8 Npadding: 0px;
q( R0 ]# y3 C( v% S8 a- [. O} + q8 j. ^( `7 V M
#pic{ $ C, _" P' ~2 \! M' A% l+ A
margin:0 auto;
B8 S# N# W @2 I width:800px;
& ], R0 i- B' C2 `9 p padding:0;
/ I6 N" r* i2 b' m' T+ E0 E border:1px solid #333; s# J/ P1 O [ B
}
: P7 ?% B5 S; v0 I#pic img{
; I; N8 |6 u1 i A6 E3 N, f max-width:780px;
; ?7 D* K. C) o. _ bwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 V5 a! _- j% ?border:1px dashed #000; " M G: |6 n/ Y7 r# ^+ q& {% O
}
. {5 s; y7 I5 w% ]--> / r' ]: N+ y6 \" U
</style>
- e( ]0 R* c: F0 M" s1 i2 f</head> ) [$ `6 B: o: T
<body>
5 A* J1 f2 x3 L5 M% o( }8 N* \<div id="pic">
! }7 B+ H4 n0 @3 d6 f. M! d7 [<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + J& C- a4 u/ y5 _0 e9 D: R
</div>
5 [& S0 y: v' L, }7 F</body>
" w" p/ J$ `7 o5 i/ [. @</html> |
|
发表于 2007-12-8 14:55
| 