|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14191
- 金币
- 2386
- 威望
- 1647
- 贡献
- 1334
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' } l, r+ P/ J' `! w( d# M关键在于：max-width:780px;以及下面那行。# Z. \% @& Y8 V
固定像素适应:9 r: N: N5 h5 W t7 `! T7 j
$ F1 N5 M, R4 v, ]; o! [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> 以下是引用片段：
+ R6 Y( ^7 e0 P& Z<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' V1 T4 h9 T, h( g1 R7 t<html xmlns="http://www.w3.org/1999/xhtml";> 7 }" d* m) }+ d2 O4 f" V
<head>
" H" S! c$ z* ?" M' t<meta http-equiv="Content-Type" c />
" q6 [% W! ^* Z; ~/ J s<title>css2.0 VS ie</title>
" z! V; t0 J T) j- J6 {8 b<style type="text/css">
: s6 n y- H i; k, _* F( d<!--
/ X2 l+ f4 |! h: I8 d6 Ybody {
8 Z0 b+ j, l; @# L G! _; d, _font-size: 12px; 8 z$ a4 t- i, W9 v! L
text-align: center; & m7 {3 Y# O8 R) y7 o4 G
margin: 0px; $ P8 } A& f4 L! x3 l
padding: 0px; " {" }3 ~2 t; e7 i( W1 n! D q
} # C! X' d9 I9 U! k
#pic{
- w/ N( ]4 M5 ?2 i margin:0 auto; # ^- ^4 m8 p% T7 @& H. c
width:800px;
0 \6 A$ c* }( d6 B padding:0;
/ X7 a U. O9 {0 j5 Q! F border:1px solid #333;
5 Q( N' u- j& {& i+ m }
& B9 p6 F" l/ S#pic img{ * `! B2 |7 f6 }* d
max-width:780px;
- |+ S7 |$ x( y i2 ?: }% _width:expression(document.body.clientWidth > 780? "780px": "auto" ); * N0 j0 m" h1 K
border:1px dashed #000; 7 Y9 o( l6 a5 J. H0 D
} 6 V$ r# ]/ a. J6 F
-->
9 M, Y9 ?) c$ h2 \& u* u" S</style>
; L/ a" G# A' Z' n5 T3 f! E</head> & H; v9 H6 _0 y4 y" q2 m& ]1 Y
<body>
% f% T0 n0 r6 d<div id="pic">
c7 {) z" ]4 S# T$ W/ [- [5 p<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 0 U+ `5 {' c a( u& o/ [
</div>
* t ], h& b7 f. {* p</body>
2 W: B( e. s; D. Z' X: v</html>
, C1 F9 I: }# F! D3 g# @( ` }/ T, e! Q+ l6 z/ Z
百分比适应:5 c. {" E q, `) i: |* s
以下是引用片段：
# [9 x4 n6 V3 T! V$ @" _ S<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# S6 X9 `( e' A<html xmlns="http://www.w3.org/1999/xhtml";> ; A3 n4 }4 V( g* Y! Q# H+ w$ C, o0 f
<head>
9 C) }. C4 ~/ p7 ]2 N: B<meta http-equiv="Content-Type" c />
: T# m2 M5 ^7 ~<title>css2.0 VS ie</title>
5 j2 X: [5 j+ W' \& L<style type="text/css"> ( D4 i0 M8 f' T
<!-- ; W1 O7 _& g+ M+ L4 T
body { 1 ^$ K+ p: Y% S6 J8 y6 g+ @
font-size: 12px;
& f4 E+ D l ?- Itext-align: center;
6 x# d0 C5 {% ]# lmargin: 0px;
+ f" K" n3 ]# f6 p% zpadding: 0px;
9 q& y) ]4 h$ [8 _}
4 G' f6 i: }! d. m; s#pic{ 8 M1 Y% [- ^; |4 A0 @
margin:0 auto; 0 h: i5 i& D" \ {+ r. K
width:800px; ( M6 | b/ S, C# D: b
padding:0;
$ R; `5 M5 C4 W# u) v border:1px solid #333; 9 I: ?( @' R% T1 g- O# _9 n
}
/ I) p7 m8 Z6 @& e# s; w9 m/ u7 N3 S#pic img{
/ e& F( `. z, W& y( Y/ q; \5 V max-width:780px;
, A# r$ w6 G, Y) S6 F( Awidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); # d0 j: ]5 w4 H$ d& H# P4 v
border:1px dashed #000;
# v+ M& ^3 n) s} - P9 t5 Y7 F: i7 W7 k
--> ; Z, P1 d' U4 s% `( P$ M
</style> % {% T7 P5 M$ q* g- U b4 v
</head> ; q; U- D( s s7 x5 a
<body> " s4 `5 S3 K: ] Y9 s; n
<div id="pic">
, e; o' T) | k& }1 F5 a* U" a) R<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
7 k2 T5 q4 X7 k P3 ^</div> ! j& X; q" M |1 w8 [
</body>
$ H2 P- {( j7 r i</html> |
|
发表于 2007-12-8 14:55
| 