|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! @% F: t3 I/ ]8 I. n, e! S9 Y$ y" j关键在于：max-width:780px;以及下面那行。5 S0 q) o9 [# ]7 s L3 e, G
固定像素适应:$ ]) {/ R5 T# v+ P/ t3 `
% v7 f$ p& T3 c) A& 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> 以下是引用片段：$ u# S) F2 K: s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 A/ [, l9 q! G5 R3 C J<html xmlns="http://www.w3.org/1999/xhtml";> ) j7 r7 y+ c7 q- `$ r
<head> 7 o c- g+ ?- k5 d
<meta http-equiv="Content-Type" c /> ; W1 Z X2 M, Q
<title>css2.0 VS ie</title> " L6 m* q6 P& V) B- Z$ [
<style type="text/css">
# _% g4 v9 G. P4 [7 ^<!-- 8 `8 L* w& r8 ~% X, F
body {
8 F G' a8 Z; X' W- U3 c. Jfont-size: 12px;
. H" H3 C6 U5 b) x4 Itext-align: center;
$ \) |! t T1 p tmargin: 0px;
8 b+ D) c5 y) n# M6 k3 M6 vpadding: 0px;
+ ^) Q3 U6 v' g2 [6 |} , ^8 r( O4 o% c8 {/ ^9 T* X2 Q
#pic{ 4 L4 G/ h/ |7 ?7 E% t" n* x
margin:0 auto; ( e3 _9 M. }* W$ H! r
width:800px;
+ `* w) Y5 b, C/ b7 ] padding:0;
3 I: j2 r( S4 R* F' p6 S border:1px solid #333; 9 F0 ^6 }* {" p, c* `
} 7 _( G2 Y6 v. {) ]7 p! U# k
#pic img{ ; d' V% s5 h. L1 T9 s3 I6 o0 A. W
max-width:780px; 6 t, E9 _+ h" D1 e2 ~- y$ R
width:expression(document.body.clientWidth > 780? "780px": "auto" ); - w0 b9 f7 ^9 T" [1 x- w
border:1px dashed #000; 9 T* q% @" a F# ^- C$ U& o
}
$ o3 I& w' u! Z; }--> . b" U. ^* Y+ w t
</style> + r( `4 Z" I* b: y; u1 E; e4 K& f. q" ?
</head>
9 l f2 ?; N0 z" Q<body> % ]8 V. k2 c: \# |
<div id="pic"> 5 e2 c6 O2 W* k' `! J" ~ B/ ^
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
6 x/ r' P# g b6 `0 ]6 q9 D' C, j</div>
: e% s) D' q" \. c</body>
+ _" f# V4 R4 h: ^$ v% c# [</html>
! \% f8 f! ^3 _% S- k. F0 K' q7 B( @+ J8 l7 q
百分比适应:' h0 L7 H8 P* \% d# `. j
以下是引用片段：
. { c& } E8 c3 g" t) V<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> # P+ r3 u, @! X; P+ g( e. b' e+ a
<html xmlns="http://www.w3.org/1999/xhtml";> ( n. l4 Z, a3 _# N
<head> 9 X2 y7 B% g/ g8 ^$ C
<meta http-equiv="Content-Type" c /> 6 D; d4 Z6 X' K3 D' W/ k
<title>css2.0 VS ie</title> ! X% [0 X$ f3 E( t; m
<style type="text/css">
0 A, L! n1 J1 O- Z# ]$ J! M<!--
; e% Z. E& }6 U$ c- M1 N' l. ~( ^5 \body { & V; Q1 m' l! |
font-size: 12px; * O3 ^9 s, h1 I' E! D
text-align: center; , t. e6 m8 ^* z& |6 P6 a# w! M
margin: 0px; ) g2 k& m3 q- h. |8 e$ [$ h
padding: 0px; ' U3 e! M5 h: V# D$ a- P; z
}
9 Y0 P. l, ~$ @% \& ^9 r. g3 _#pic{ ' t# O9 o& V4 B# B# Q2 j; `8 |
margin:0 auto; 8 O" f( d6 w9 f( ?6 Z! M$ D
width:800px;
# Y6 u- l8 g% m9 U, U padding:0;
; Q; D( C" A$ k% F5 Y% Z& M! } border:1px solid #333;
, A3 A5 D! I7 E0 a7 H } & [' R: L, i( x$ }: |, \2 m
#pic img{
1 w( F+ Q7 d* Y; p Z" E w max-width:780px; 7 v1 w& \& V( m1 Y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
! s" ^) R- Q3 s! i5 K# D9 Mborder:1px dashed #000; " f7 F1 t9 _- H8 H; K" @( ?; d% V; w
} % R8 H# }7 ~7 s2 Y# Z
-->
3 `' a- H8 a( F4 u- S0 n4 w; _</style> ' V0 W) A# G: N- u N& H( V5 u7 @
</head> d; g! |. a# v% D
<body>
7 j. ~7 ?/ }( m V4 z7 D+ s<div id="pic"> 8 L" f) w5 J! m3 _
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
6 S$ m- I! ~0 a2 g- f1 l* m</div>
- h& o9 Q/ h6 C, S- A. C' w</body>
7 U+ g; T+ e# K, d' g$ i7 L- i8 c# h2 Q</html> |
|
发表于 2007-12-8 14:55
| 