|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14337
- 金币
- 2454
- 威望
- 1647
- 贡献
- 1402
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
- I6 l" E! `/ L关键在于：max-width:780px;以及下面那行。2 q- @. V o3 t2 u
固定像素适应:( p6 Z% P5 q6 n( D
2 {! z, [! ]! w# g
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> 以下是引用片段：
2 z1 `1 @. r& ^0 C; p3 e9 s<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; z0 W! a, e5 Y, o) ~/ o7 R<html xmlns="http://www.w3.org/1999/xhtml";> 2 [; k4 Z6 O. s: l( v$ q4 I1 E3 W
<head>
A0 j; a* w/ X) |7 m<meta http-equiv="Content-Type" c />
& M4 u$ M% U4 r+ R O6 `+ E<title>css2.0 VS ie</title>
, m: j. H+ K7 y<style type="text/css"> 0 h$ g* T* ^. t- y8 ~
<!-- , d7 \9 W- E) ?! A) }
body {
n5 t8 J% E7 w+ k. s8 j# Tfont-size: 12px;
8 r; E# i# ?" Vtext-align: center;
* N8 I0 P+ ~5 tmargin: 0px;
[; n+ o5 r6 w9 Zpadding: 0px; , n- f8 n( R( O F0 T
}
& B5 Y; p) R" a3 V U H4 n#pic{
7 y: c. g- W' v! @ margin:0 auto;
9 R2 s2 H+ b7 r' j8 [4 j" f width:800px;
! n( }7 w; F7 |+ N9 ?& {5 K padding:0;
& x. a/ a% e, E2 [8 E4 P border:1px solid #333; : y x4 m3 @' F
}
9 P9 a& g" j. U3 l1 H#pic img{ 1 p9 v5 Q2 t c' p
max-width:780px;
7 e G2 |) I4 i3 r/ ~width:expression(document.body.clientWidth > 780? "780px": "auto" ); V9 b% p9 [0 Y! l4 I' Y% `
border:1px dashed #000;
E) J9 R3 T. p; ^0 o/ ]}
& f- }) g9 E/ K& o--> 1 z$ S* o8 K8 p# T; K
</style> " P, q U& x' |" \# W& v
</head>
& }9 i8 w+ v- j* o6 ~5 k( e<body> " Q* K0 f0 ~. ^6 G
<div id="pic"> & l2 f5 F4 s0 W! F5 A) l" `6 n+ y
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> # `/ ]% _+ K( U7 ?
</div>
, H0 g+ g) ~( n6 W. V" v</body>
2 u. A: R/ X E; `; [</html>
# e0 L) Q4 x5 X. l I3 q8 Q, X- _# S0 }" Z: b% @' q, y0 V! c; {
百分比适应:5 @! f. E) e6 A! p( I
以下是引用片段：
/ Q( A5 ^( w+ k( {<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- t: ^; q9 m& ]! b) }<html xmlns="http://www.w3.org/1999/xhtml";> " X; M0 T9 ]# ` w5 p* b
<head> Z7 |+ {9 g& ?! ]; M( U& s
<meta http-equiv="Content-Type" c />
* E4 G7 O x4 j# `0 m<title>css2.0 VS ie</title>
3 y+ u/ I; Q, [% }. k<style type="text/css"> ) S6 B- e [3 v4 _+ K) l8 X8 O$ O' a
<!--
6 g# {) H0 e* ]& Nbody {
$ v, [$ y. y/ d. Ofont-size: 12px;
7 M+ G7 S/ \; n( C- ~" R0 _7 Rtext-align: center; ; S- R9 j) [4 q/ G& o( Q
margin: 0px; ' x( e" }- H* G
padding: 0px; * |* |7 K; v3 x3 R: S4 k
} . x# V+ D' l0 K( u2 g$ ~% {; E( L
#pic{ + o4 ]' N% ?4 `2 @) ]
margin:0 auto; ! y8 R, b c; ~' ?2 }# e9 }) D
width:800px; - e ]7 v; c* g z
padding:0;
: F. L) q3 U+ E& r border:1px solid #333;
7 e' }3 {3 l- M7 Q( j" d* W0 A }
}% o: o) J6 n% ]0 G1 k$ z#pic img{
/ _$ C0 \5 M1 v max-width:780px; 2 ], M5 P% I/ H( _
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
( @& i, z7 t$ t$ f( Z# Z) Z# Bborder:1px dashed #000; ( J2 v k0 f5 E; {
}
3 y0 i! q% [" F% y- {+ a: u-->
0 S9 E% }9 i, k4 U</style>
8 ?5 A9 G5 D* J3 H</head> ) }, _2 t6 _- y' S: R
<body> 3 B7 y8 `3 V- \. }- @
<div id="pic">
5 O5 ?0 k. K# g4 H1 G7 \+ K<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ' U9 [- N0 C2 Z( x% U0 R
</div>
n4 ]- f4 ` {3 `0 J7 q</body>
, P' A/ Y, X% H( n& H</html> |
|
发表于 2007-12-8 14:55
| 