|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14365
- 金币
- 2468
- 威望
- 1647
- 贡献
- 1416
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
, r5 w& B; e1 ]1 R2 ^* ~$ D+ B. j关键在于：max-width:780px;以及下面那行。) |$ D: V* s; N4 v) m
固定像素适应:! L- @0 N! {" |% G* n
' d1 b6 f( U9 {; hdotted; 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> 以下是引用片段：
# {. m5 t7 k; w<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ f4 O6 E% T) J V$ p3 z+ ~<html xmlns="http://www.w3.org/1999/xhtml";>
% k! E. q: B$ r+ |- f& H( U<head>
* K7 @* C. w- l$ s& D- D1 ~<meta http-equiv="Content-Type" c /> 3 z t9 v+ g4 {3 Z2 m& [ f _2 q/ @
<title>css2.0 VS ie</title> ! C. C; y; ~3 | n7 ]2 ?1 w% r
<style type="text/css"> 6 ~/ P) {) I6 m. d" V) x
<!-- P% U3 b" C4 J/ r) u3 \
body {
. J9 Q& u, l" K& F4 x# G% ufont-size: 12px;
" g5 w, T& K. m; atext-align: center;
* E$ w" a: y- u# @margin: 0px; & n8 I5 c4 a! G) _3 F" o
padding: 0px;
u% P: W8 Y$ J2 N! F g5 M} + v$ E Y& m, Y, v* p
#pic{ + V2 N9 O8 f8 }+ s
margin:0 auto; 7 W* O% J/ e4 E. i
width:800px; 3 k4 I7 S3 `) s# N
padding:0; 6 m( Q; C- @; U# W+ G
border:1px solid #333; 1 `4 y* A" ~% Z: |( w
} 5 V" o( J. h4 g5 X6 W1 |8 C/ O p
#pic img{
9 c/ m6 @/ y8 m2 W1 y max-width:780px;
' V5 Z. U4 f. g! `% W4 o9 Kwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
8 O H) N* Y* ]: J* s6 \, [& \border:1px dashed #000;
3 y% K) i: d$ C H) x7 r}
/ N Y- m2 P+ r+ ?( ~-->
( B& K( ?0 G/ K- i g/ w2 x</style>
2 E' J7 W3 j& ], r' t5 R</head> , W7 |7 V$ l2 { ]% K
<body>
, ^9 ?. [+ G7 C( l6 g2 g, U<div id="pic"> * x/ t) T6 s7 j3 c( v
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
$ O& V# r! A4 o& @) p; M</div> 3 v5 n: V) n; i; l! |
</body>
8 L" c: K/ T4 G% \' W</html>
' O; j9 T8 ^6 m7 K0 d
3 D( T9 k; w: o5 G" f7 [# D0 A百分比适应:6 W& R& `& v. o! _' I) A8 B
以下是引用片段：
) N( z8 k" l( f4 v<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: u) |7 Q; y5 F8 D4 \<html xmlns="http://www.w3.org/1999/xhtml";> * G5 n/ B( |7 L+ j1 L
<head> 0 |" S7 P6 ]( S
<meta http-equiv="Content-Type" c /> . ?( D' A4 N! u3 ^
<title>css2.0 VS ie</title> , [3 ^2 y% |* X+ g' Z9 e
<style type="text/css"> 7 p D7 z% w c+ w! w
<!--
5 z5 \+ f* Z% i. T6 _8 p2 lbody { 6 z' J. C* w( i, `% ?; Q5 |
font-size: 12px; # e! \1 m+ |( j( {
text-align: center; ; U( [" ]8 S. i! D# R/ v
margin: 0px;
/ l* e9 E$ ?' T8 e2 C* f. r' \0 s4 Fpadding: 0px; * |: ]8 v" u" I3 z5 M% G
} 3 B8 R% N4 b4 I5 E
#pic{
# ?1 h1 s- k7 [* B2 S margin:0 auto;
7 u& O# B. V$ W! W" e4 f4 y width:800px; & v) {3 q+ x* W* q
padding:0; 0 l, ?: q# e( h {
border:1px solid #333; # ~2 C0 \5 V+ P
} 5 O/ k8 P* k! N* D
#pic img{
1 Q2 ]) p* Y# E" N" h1 w5 W! F max-width:780px; * b/ U# I0 q2 q6 v
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
0 O6 N. b, R4 A# V! P' m7 i$ c& mborder:1px dashed #000;
2 j# `; z9 S) c( e- T} ; y% y f6 K# i6 s( ^' y0 m; O) ?+ g" i
-->
; l5 ~6 G1 z6 ~: {* V</style> ; K; l4 o) W; ?! p1 T5 c" B0 K1 O5 |
</head>
: t9 `: K H0 M, @; U<body>
$ e I2 h+ a! V1 t D<div id="pic"> ' o( F# l5 N; B# Q7 z
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
8 {& r. R6 |" a+ H9 T9 g+ U" G</div>
& T2 h/ y- k [0 z+ {2 D4 e</body>
; v2 O+ a k8 P' F: o</html> |
|
发表于 2007-12-8 14:55
| 