|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14331
- 金币
- 2451
- 威望
- 1647
- 贡献
- 1399
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
3 h; Z! J$ \: j' X$ i% ]关键在于：max-width:780px;以及下面那行。
: N1 V# ~$ ?1 g4 T [( D固定像素适应:
, }! F. m/ X6 }8 o, z! \! K. [5 l0 @3 w* J. N8 Q; G! N6 u
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> 以下是引用片段：, a/ s* w2 x- H: B- }# z9 g! S
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# w- ]4 @% s! I! x<html xmlns="http://www.w3.org/1999/xhtml";> ! c3 z2 X! |. h; y3 z, P: M
<head> ; o( B% a4 W0 H
<meta http-equiv="Content-Type" c />
) ~2 M+ ^; y8 L8 n$ @. _<title>css2.0 VS ie</title>
% T. T0 i) n. k2 y( B<style type="text/css"> 0 l! a' u; L4 s1 G* ]4 ^. q
<!--
; [# H( I! @9 T' G, Ubody {
( N. }4 k8 |; W1 ~9 ofont-size: 12px;
9 z7 l5 y7 G8 F2 _; ~7 Utext-align: center; % E3 i% i# T* i& H) Q
margin: 0px; * M1 B7 X/ Y, {- ?4 o( W& q; k
padding: 0px; 1 h; v# I" T9 Q4 j* @; P
}
" w- `( G8 o9 Q5 |4 {% t% t) V#pic{
u, N& V5 h! E" i/ M margin:0 auto; 9 X- x0 J9 x# p" t$ u
width:800px;
1 |, f( D3 Z6 o% ] padding:0;
$ n) ?4 d0 r. v$ A0 _, p border:1px solid #333; : _# U" P6 P, e5 a( C$ x4 g
}
I+ F d! \% m! j3 L7 d#pic img{
: w: t5 C* l* T max-width:780px;
2 W% W" i3 e+ c$ o3 ?( |1 s0 T, dwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
' c0 u, {5 N; I. k. |3 Zborder:1px dashed #000;
. ]3 q v2 M" o( S" A. S& f} + h |! {6 l9 `) t: }
--> $ \1 b' f- [) l! j4 t
</style> 4 E {1 Q# D5 Q$ X1 @+ o; }% H O
</head>
8 ~' x4 B1 U" i! m" O0 ^<body> 5 R. M1 [' A7 k' J0 ^0 |
<div id="pic">
; P# W0 k! o6 i( r2 M4 O<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
1 K+ z5 R" z$ U</div> 4 z/ i5 t1 b. q8 y& B! N& W! x* T
</body>
7 q; k, e9 D! h) _9 I- P</html>
* g* V# b K# [2 @" g7 j y2 k
) ]7 b3 v3 m% S6 |- `2 v, s0 [百分比适应:
! f- O- c/ {' F" _以下是引用片段：
, e o/ H- D6 Z: I5 I) U' g5 X<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> " f3 q4 L, i3 [, J
<html xmlns="http://www.w3.org/1999/xhtml";> , \ W9 ?! E, X+ }: c( Q. Z( ?
<head>
, p% Q6 w# o" h9 D4 d# I<meta http-equiv="Content-Type" c />
^- r% H+ [6 s<title>css2.0 VS ie</title>
) I) j8 M8 L& ^; _6 o8 w<style type="text/css"> # v% Y5 u+ p. z0 k9 X3 H! {
<!-- - Y E; X; E ^4 r& \
body { 6 R. u% U: I3 ^# R' s; Z b$ A
font-size: 12px;
& u2 l4 \8 ]% i6 Mtext-align: center; 2 u7 q* Q. {. Z; u7 E; O# q
margin: 0px; * D# T( N- K4 M. X5 o
padding: 0px;
6 @4 i7 Z' \- p$ w5 E}
2 D. E" T% ?3 ], @#pic{
$ j0 E8 t- s& m1 q9 d2 W9 p margin:0 auto;
1 G* Y* G* ^* v* i2 w; T width:800px; ; q% ?0 L$ L/ H4 N7 O- ^
padding:0; 0 {: Q' h/ F: b' n; f
border:1px solid #333; " o. V+ m& Q4 U( R. j$ m6 ?+ ~; z
}
, B% j. H$ O- F#pic img{
' M' j9 Q: d! o9 h max-width:780px;
9 O c, n' t& e9 F# uwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
( N* \5 F8 d2 |- T9 _border:1px dashed #000;
# W' r* T' Z6 B, ~- Z- Z0 Y( x} 3 V6 X- c8 X; C' m2 L
-->
( _4 r1 l' r5 L. U0 g</style> " A" v$ i+ m$ U1 Z
</head> # ~2 R+ w% x% }4 n
<body>
) _1 {$ T& H% d6 V3 @% H O<div id="pic"> $ j4 f5 o1 E" u1 x, @
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
1 L: L7 N7 F0 s; w* a</div> 4 D; ?6 m, S1 D& \! ?" i8 U$ A
</body>
- q+ d+ Y4 t& z- b: u' D4 i3 E</html> |
|
发表于 2007-12-8 14:55
| 