|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14191
- 金币
- 2386
- 威望
- 1647
- 贡献
- 1334
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。8 @7 J- ]! A8 s% y
关键在于：max-width:780px;以及下面那行。
6 a; m; K/ @/ H7 V2 `( m" K; U固定像素适应:
' L0 p8 O# k8 {1 S) d5 a4 f
9 I% m1 @6 @5 N+ m" 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> 以下是引用片段：4 b p/ C0 G. m/ h
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
7 Y+ \2 i3 L3 Y$ _3 J# R<html xmlns="http://www.w3.org/1999/xhtml";>
5 |, [# I- U0 b, B( M<head>
! f- Y g4 d1 _: }<meta http-equiv="Content-Type" c /> 0 {" o/ `- i/ p0 H
<title>css2.0 VS ie</title> 2 Z8 T' C5 n8 Y* K& G$ i
<style type="text/css">
9 b/ O3 Z# j# K. V" h<!-- $ z: M# `9 ^" V: Z% q
body { & X- L2 J! d: u' Q
font-size: 12px; 4 u# i p. w1 W0 s- n3 S
text-align: center; - J5 Z2 I) p/ O& m; d$ E$ n+ A; y
margin: 0px; . J, K3 [- J$ [/ m7 G$ v$ m' n
padding: 0px;
/ z+ G4 |& O, N}
: D* a( V. z' m+ _, B' p#pic{
& c. R* ]4 F8 M! U margin:0 auto; 4 Z; ?2 [4 Z% x) K( Q
width:800px;
+ u9 m9 s9 g. f, ~5 @ padding:0;
4 G/ e( d" J" A border:1px solid #333;
/ r$ l! `% \6 p) M# X }
5 F. G+ o) f. B! ]# L% h. x* ^2 ^#pic img{
1 i$ r& p1 \) J$ I0 Y* O, L# K max-width:780px; j8 u# i7 Q# T3 ~4 e5 @
width:expression(document.body.clientWidth > 780? "780px": "auto" ); : ?. s$ h0 O8 d/ x
border:1px dashed #000;
1 z6 Y( O1 A3 j, V# I/ b( A( j}
) z# N4 q8 l' C: y- ~--> . v" A: }) f' ?" b
</style>
5 P1 W3 J+ V# O1 N8 `0 N2 S j</head>
2 u# F4 W" J8 |. H$ l<body>
+ ~* s) ] _/ ]& z/ `- C/ m<div id="pic">
7 W* B) B W9 t0 G+ N) J<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 6 ^6 U$ T$ |8 o2 f! @
</div> : O7 @& b, H% s# G+ S
</body>
8 z F+ l2 ]5 e" A. y</html> * S% ~9 {- `" c4 W2 x6 j Q2 s' ?, \: z
1 p' [+ ~) @% [! s4 c2 S+ b9 b
百分比适应:: o4 Y! W& t* O& S
以下是引用片段：
8 K- X5 _+ P# J2 j& S<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> * `% ?2 D' u6 u$ K1 k
<html xmlns="http://www.w3.org/1999/xhtml";>
! T! X2 t, g9 g8 K& G1 Z6 {) S1 ]<head> ( C% I. W3 @. P$ y. b( R
<meta http-equiv="Content-Type" c /> j3 B! I- {9 F1 O
<title>css2.0 VS ie</title>
& ~; X( _% U, y4 w9 ` u) F<style type="text/css"> 4 e [0 O+ }4 P+ i, F
<!-- & ]' B* v1 p8 W' `9 Q8 C- K
body {
4 {& s1 l2 ` I T/ y' C0 ]font-size: 12px; % G0 q* ]7 V. z9 [) G6 k6 I9 j
text-align: center; * \# v- S# h* z0 W2 j$ N
margin: 0px; ' t$ l) [5 S& e
padding: 0px;
8 H" V' t# I2 [1 V" f# n* c) u2 _" t R7 T} ! a; Y, f) v, j% Q
#pic{
# _6 S4 L. o* ?, c; H margin:0 auto; / A" f, U/ M1 \( }) ?5 }. Y
width:800px; 8 K7 s/ g b3 O2 l$ ]
padding:0; 9 @0 Q8 H" O3 q
border:1px solid #333;
7 {' a+ l' e; u& }( w } 8 p# {* E( _- ~( a% S( x7 W
#pic img{
$ U3 a, E/ N; o9 ?& Q1 g0 } max-width:780px; 8 i" s2 @. ~6 y' ]: ?: r
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
# \- v5 `( X2 k5 G$ ~( Vborder:1px dashed #000; % a |* F$ P9 ?0 s4 C7 ?8 G
}
9 b1 D V% I8 _- @& q7 s-->
( t: S5 B3 _( y</style> 6 W0 B* R0 y* X6 Q8 r/ v
</head> + K) D5 `3 |+ S, |6 N
<body>
( \! w1 g1 h5 A% y4 P- P7 e; ?. ]<div id="pic">
/ \+ W0 v4 \1 u# C5 A<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ! r. T5 B+ f* Q; i9 T
</div> % m( _7 s3 I( t1 M0 j8 [" G. E% l
</body>
8 r4 C: }3 w" \4 A, n6 {7 c</html> |
|
发表于 2007-12-8 14:55
| 