|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14191
- 金币
- 2386
- 威望
- 1647
- 贡献
- 1334
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 _' o9 D& [' t" E0 h* m关键在于：max-width:780px;以及下面那行。
( A1 q: N3 w- S- O9 n" k固定像素适应:
& p | E/ }4 h' @3 \" @. T5 P2 _& y9 ?" }' s; b
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> 以下是引用片段：. x {5 I$ l( A) f# u# l
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 V% v- c/ g, ` y<html xmlns="http://www.w3.org/1999/xhtml";>
2 W+ }2 m6 H3 i& l<head>
8 t8 ?, `9 h7 ~5 l( j; _5 l2 r<meta http-equiv="Content-Type" c /> ( w7 X) V3 `4 D: N5 L0 N& d) ?7 M
<title>css2.0 VS ie</title> , v0 h6 I( K, _5 z( ~ |
<style type="text/css"> ! P% h" E: s% v' D& a% d- j
<!-- D4 c6 t/ V& ?2 p' U5 y5 ]
body { ( U8 Q+ I( M2 n2 l- s
font-size: 12px;
) t2 L! v- l' f3 W9 V @text-align: center;
" n7 T8 s" X) smargin: 0px;
# x( z3 K/ W5 k# o9 W( D. Lpadding: 0px;
7 D4 o; f3 M4 ^( q9 ?: J( w4 m7 O2 l}
" V6 R, `. @% N* J#pic{ 3 b2 c1 s, K' |4 {: b
margin:0 auto; & ~( [3 B7 r- \% S
width:800px; 6 v6 T# @- N3 G3 o6 k
padding:0; ( |$ |6 s& S$ F7 @8 `8 ?1 R
border:1px solid #333; ! }, O+ x9 t: ?
}
: N5 e/ K' U8 o* _#pic img{
# q/ v0 c6 H! N! l max-width:780px;
* N8 n: K2 Q3 |width:expression(document.body.clientWidth > 780? "780px": "auto" );
& F/ d! B# G; b2 H5 v5 b/ Z7 Hborder:1px dashed #000; 5 W V4 F: t; X* M7 g8 l0 `
} 0 A. P; V; n9 I5 f: f' A, F
--> ' @2 Z- c' l; H) z, A3 W
</style> % U$ E8 d: w2 h
</head>
& D' X: Y, p: F, \7 f3 X: r9 U7 C3 h<body>
* z* R3 j* _# Y; N' W4 Y/ _( }5 g<div id="pic"> , E& L, n( m' b) ^
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> % D( F) t! b# R( H/ I
</div>
: g+ {* Y8 D1 P* k1 y( x; i- o8 m</body> * k: T8 x+ f& o6 ]$ d0 B& o
</html> * h' j' o; l( }9 Q4 [0 \1 Y' N
8 H, f" P* a4 i: L6 ?) O% ~百分比适应:
4 d( O$ M* G8 r: z+ k* N& ~- u以下是引用片段：, v/ g8 S4 L% E7 O
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" g/ I" \3 V0 o* }& @<html xmlns="http://www.w3.org/1999/xhtml";>
* |" Z% j) }+ l+ i7 N<head>
. S( V* K) {7 m, S% R. p4 e- g. P<meta http-equiv="Content-Type" c />
7 s& B, b' y2 u @<title>css2.0 VS ie</title>
7 P9 K) T5 R& @* k9 Y$ i- J: @<style type="text/css"> - j% d+ n' d) H( S1 ?
<!-- 7 Q+ ]# o( Q! J0 _( N
body { 4 `' R* s0 F8 U
font-size: 12px; 7 n* ^3 i& Z) |9 J% F8 q) c: n
text-align: center;
5 f- o$ X( |5 D$ l8 f$ A0 Wmargin: 0px; 8 y4 Y! M- y- U* x7 ?
padding: 0px;
3 D* u, l% |' {* |' G% D- ?8 n} ( a3 p& O! Q& P% K. y2 P4 r/ E
#pic{
* s% x7 W, [# g1 g margin:0 auto; * ~0 u- U$ ^! W& F' j
width:800px;
. j. F( {3 Q" x, V7 Z padding:0;
/ U5 C0 D- }, ` border:1px solid #333;
! }* R, y4 b! T S0 m } # ^+ D; R' M/ l8 b8 c+ l; I9 }
#pic img{
( C5 S2 s/ ^, G" B- y7 X max-width:780px; 1 F B) v7 ^% o/ f8 F
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); # C, n y! y- q* B# a
border:1px dashed #000; , s2 D/ G! H6 c& n: {4 i2 N
}
3 m4 ]9 [, D7 m4 v& }7 Y# o/ k--> % Q; ~' G/ A8 E. S% f- Q
</style>
0 m+ ]3 t/ _* x9 {</head>
% _- {' k& y" b& y& v& E- t, y<body> 6 f8 y+ j9 z4 A
<div id="pic"> @2 T; G* t8 s1 x% e# {8 X0 e
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
+ P6 B% p$ \+ r% X' G</div>
, p* Y: ]1 {7 e* x8 |</body>
7 J6 X) t* r$ q0 [4 ?+ m: q</html> |
|
发表于 2007-12-8 14:55
| 