|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14353
- 金币
- 2462
- 威望
- 1647
- 贡献
- 1410
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。/ x1 V6 W! s6 Q% k" }. @) C, U
关键在于：max-width:780px;以及下面那行。, H4 i5 q% C0 ~ O
固定像素适应:
7 d" L) [# I' t* D \9 I; k; C! i9 |) d2 t, j
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> 以下是引用片段：
0 Q, o: O$ b5 ?6 @- M6 h! q<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ' G( I9 b# Q6 l, I% `5 M! B. U
<html xmlns="http://www.w3.org/1999/xhtml";>
( b) F, _9 ]$ v# ^1 D. b<head> 6 V9 [5 Y8 ~$ z( ]; q ~
<meta http-equiv="Content-Type" c />
+ {+ ]) _2 L+ A+ Z7 L<title>css2.0 VS ie</title>
4 m1 g, K) T1 S9 U! _8 v<style type="text/css">
/ o. t, E& y2 D, D5 }/ U- ]<!-- - L: L9 O5 C0 |( ^; ^& L
body {
3 t5 g1 P. P% U* A l. Jfont-size: 12px;
+ w' j H! f/ F- x- `- \, e2 w& Htext-align: center;
+ D- M4 n4 h gmargin: 0px; * O# V G# ]" n8 F, [" k# y
padding: 0px;
: F* e8 b6 S+ d3 @} ! t$ Q' j$ o$ p1 v! q
#pic{ , r1 ^& d3 s5 f* n5 |# q" `
margin:0 auto;
) N: T. m0 a! a width:800px;
9 G0 @2 }+ ]8 W padding:0;
. M. j7 W" A( F3 W( q- ] border:1px solid #333;
6 c* D- T; `; X/ V% U' f } " u) ^* X) j3 r3 H8 q
#pic img{ . u1 x+ Q" {2 r, R
max-width:780px;
2 R" d7 x- }2 O1 p' ~6 swidth:expression(document.body.clientWidth > 780? "780px": "auto" ); y' r2 x. L1 U9 j. o
border:1px dashed #000; ! H6 S, e! o/ P. J' P9 m9 Y: N
}
" A$ t0 ~4 r @1 ^ Z-->
9 m6 M- R: p. m, L</style> ) y: h+ h8 f5 ]* Q K
</head> % [8 {" {) D$ c8 j$ R- O) u% A/ P
<body>
7 g0 {* b$ r$ V4 T<div id="pic"> P0 U) E! N5 d
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
9 {% I+ \- H5 g: \. ^</div>
% [" L2 h8 a z8 @" B</body>
# Q4 ^: ]& {( `/ I* H$ m6 G</html> 9 V1 K% b( M, e" Z! K2 `5 [
$ l3 [ c! E% C6 o
百分比适应:. R/ N, X! p: Y) `+ t) [! _% i
以下是引用片段：
/ M$ L$ N6 V. s<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 D0 x2 r5 O2 A<html xmlns="http://www.w3.org/1999/xhtml";> 3 w% _; t+ R2 F. L" r6 Z
<head> ; P- y! z% _2 _3 L& s
<meta http-equiv="Content-Type" c /> " X# T% t* E+ f2 p; v
<title>css2.0 VS ie</title> 8 j7 p+ `* B4 B1 l6 M
<style type="text/css">
2 T2 a- {. p- ?# R$ `% R2 {/ S<!-- 6 B6 r+ O. x7 F3 v7 r+ }, {
body {
9 }! l7 E- L" @) Ofont-size: 12px;
: H9 e+ J' w! _2 |text-align: center; ! j3 {! x T6 H9 p+ t
margin: 0px;
* w/ X+ Y, H0 j0 t( Y+ }padding: 0px;
0 s4 n4 o" |: }} 5 g% F6 @( F: y8 D% ^6 X9 l: l' W
#pic{
/ c* \4 u" M$ |3 C% _ margin:0 auto;
& P6 q9 C' ?. g g width:800px;
! C8 y+ |/ h& I/ H G padding:0; 5 h4 `3 V$ ^- p4 _ u- R0 Y
border:1px solid #333;
1 H5 H9 b" t$ U& p1 R/ n } ! H; m2 g) ?/ @* B Z
#pic img{ $ y, G+ K; D$ N. r4 a* H$ |1 H1 w
max-width:780px; % P7 c8 j* r* E6 d
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
& M$ V: u# K+ i7 Tborder:1px dashed #000;
1 v H9 e8 m- |; x} 1 a! d# D& i& j$ b P$ |
-->
" f- Q* k8 ~4 N- o5 }</style> 6 c# ]" t& o" c4 {3 v
</head> & t n' e9 M7 F G: z9 r% i
<body>
* j1 i, A0 E0 z3 R- W3 b7 f S, {: }<div id="pic">
" f1 E, D: J* j& u" \<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
. j) b% q% l8 B' B: J* f# a0 l</div> / I! p6 s( G) h! k) W9 o' z
</body>
' l! Z p k* h6 W5 @</html> |
|
发表于 2007-12-8 14:55
| 