|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14249
- 金币
- 2415
- 威望
- 1647
- 贡献
- 1363
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
. y3 Q. s* ~$ D' q! i+ Z. g0 p6 s关键在于：max-width:780px;以及下面那行。8 T9 P! c: n/ O2 [0 V5 @ p& q
固定像素适应:6 ]( [' ? |* ~4 D" E! Y
* g {6 I" ~9 v" S! y9 {/ ]3 s) V
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> 以下是引用片段：; O7 P1 o$ g# A" l+ Y2 a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
I1 B8 X `' \9 I8 _9 x5 S9 M<html xmlns="http://www.w3.org/1999/xhtml";>
, e. n' E+ V, d" E1 o/ S<head> 9 H5 `" e8 d/ [: v3 t% T
<meta http-equiv="Content-Type" c />
. z, o& p" t. S' r8 K<title>css2.0 VS ie</title>
5 D6 t4 V1 N2 J c& V& K<style type="text/css">
" l d- C) Q4 Q* Q# G6 A) }<!-- : W, @) U7 V" e; z5 y
body { * K9 L( E( v, N
font-size: 12px; % v/ u$ I- L" A7 g1 ]
text-align: center; 4 f% C3 l) p/ [6 j" _: K0 F8 ^
margin: 0px; ( v B" z: |# C G/ `
padding: 0px;
$ }* ]& K$ a+ c}
S' Z' v( I4 N' ` R2 u5 q; C' e#pic{ / R5 C3 m3 r2 e; M
margin:0 auto; 2 c. w! V; x5 X/ A. n* q
width:800px; 7 U _; z5 w" e
padding:0; 4 Z# X$ p+ c; `) i5 W+ U
border:1px solid #333; 1 N0 y: I# M7 t
}
) S J9 ]- A1 ]) k q" J#pic img{ , i/ L( m& ]4 F8 Q$ A8 y l+ l
max-width:780px;
' p! [4 i( R6 q& O3 [width:expression(document.body.clientWidth > 780? "780px": "auto" ); ' e! {" O- K& D- y
border:1px dashed #000;
9 r2 }' ^7 ^1 {. V. t} ) u3 T Z5 Z: u5 U) m/ M
-->
' ^7 f: c3 L: n4 V</style> * B5 N2 {! }, }8 m0 w
</head> & T/ y6 K5 q/ ]# D5 H/ m
<body>
2 h1 I6 j' v( F4 f! R0 n<div id="pic"> 5 ?. S& n& d- s+ T9 B7 M
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
0 T1 l) J* L5 r2 F$ F</div> 1 o+ }8 L) g0 s6 W6 C
</body> 7 g { ]9 \9 |- J0 k
</html>
; u( W. L! b" D& r" J: j
5 i, T2 w5 w' T1 g百分比适应:
" `4 T- H; z2 g以下是引用片段：
# c) ?( M9 n+ k3 Z" I<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 w' v3 x' v5 N1 B<html xmlns="http://www.w3.org/1999/xhtml";> O& U& O5 M% B8 ^- K" l. p( N" H
<head> # _3 y. H% N6 _( \
<meta http-equiv="Content-Type" c /> 4 h4 n$ J4 N7 B7 U. V
<title>css2.0 VS ie</title> . e* l$ s1 P9 V- ?' \* r4 x
<style type="text/css">
- B. q V# b0 R7 r* l* a% n4 m<!-- 2 R' i/ i$ j( c6 r
body {
- v4 j9 f- j# {- a7 ^# Hfont-size: 12px;
! Y+ W. ~6 I/ [) J9 ?- ptext-align: center; 1 j3 ]7 V0 t7 v# b
margin: 0px; 2 ?' ^* L$ `" \* C
padding: 0px;
5 c$ e( m) J, \' D}
+ [( E7 ]# S1 J#pic{ ! A6 _5 w& j" Z
margin:0 auto; 1 S2 K3 `! o% G& C% d8 P
width:800px; : A8 k. w9 ~, o1 ]) V
padding:0; $ v0 @2 ]* H! k1 M* A, K# u x
border:1px solid #333;
. F. y& I, C6 ^/ W* y1 N3 o" w }
( {' R0 l- r; a#pic img{
" p; X d: f; X" c' \1 a max-width:780px; p0 L9 @: r d- H. x4 u' J* j5 p3 t
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); # |1 @- W5 R3 j p! S( o) [
border:1px dashed #000; 7 D- h3 t8 d. n' C' e
} 3 @* |. [3 S J7 r9 t. z
-->
- F/ z* x$ [1 d+ @/ e- V</style> 2 _' K) @$ g% Z3 ^
</head> / K, _, d& b- }
<body> / `. B+ k8 B0 O7 Y q. R4 c g) \0 |
<div id="pic"> 4 D6 ?" I% s$ ~6 o6 b7 T
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> : r1 v! P- U( B; F3 |9 ^* j0 U: N
</div> / ] M' l4 o( H6 Q8 `6 X# P p9 \* E
</body> # F- E# ]8 t$ i
</html> |
|
发表于 2007-12-8 14:55
| 