|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
0 }9 Q0 ]9 H9 W+ p; C/ s关键在于：max-width:780px;以及下面那行。* d% G4 Q! G8 ^' k+ f: W
固定像素适应:6 X6 t" g( t4 Z, H, |$ T g
+ ]1 x" _3 H! r* _8 L v3 Sdotted; 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> 以下是引用片段：5 @! g3 u" J0 V0 Y" Z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 o; ]1 ? @' G- i9 B" `<html xmlns="http://www.w3.org/1999/xhtml";>
( K' [- r& U0 ~/ ^" c: z4 g. s<head> : M3 R! A* q3 W& @0 v$ h
<meta http-equiv="Content-Type" c />
4 E( m: w @8 |; n J<title>css2.0 VS ie</title> 5 P/ L; g+ C5 U+ R' [3 e7 e
<style type="text/css"> . P" H& @8 r( X! E7 ]5 `
<!--
_# J" e' i, Cbody { 0 W( c1 U1 L2 m6 J; G- F
font-size: 12px;
# `. V3 h- R- v% mtext-align: center;
8 N" h9 w+ ^/ a; C% `margin: 0px;
; F+ A/ s+ S; c! @" ]padding: 0px;
, {2 G, E% F/ w1 X4 D, k0 F) s$ ^9 p}
& P4 d; Q( K8 ?( g+ M! q" ]#pic{
' x/ W g* v) A0 _; ]9 T$ b margin:0 auto; 1 B( f/ v* P6 P: e
width:800px; & Q4 K- l3 F' @, f7 a( }
padding:0; " H8 l+ h' c* [9 O* K' O
border:1px solid #333;
7 `/ u# G: C& k# L* B3 H* L }
8 L% W" k8 D I: k#pic img{
7 o0 |* @) Q0 @" ~" D; `& t$ M max-width:780px;
) {, ~% N' C5 ?, b+ e8 S4 V. dwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); . g! _) u! U! }% W4 b. g
border:1px dashed #000;
# W2 r+ U! b/ Z# M' h. Y4 A}
) h0 s. R" W ?% I/ [-->
' I+ B7 v$ w6 k# [- J9 L</style> $ L" a8 _% V2 m& _3 k, D7 Y* {/ U
</head> ) |; j5 S4 a8 ?1 s# v
<body>
' V+ R2 N+ V& W _8 V# r<div id="pic"> 6 v; `5 Y2 E, y! X1 o7 l
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
q) Y% a2 D0 E0 g/ Z' ~' b</div>
, \# _; r- R1 Y* Z</body> & [7 t! Q+ J4 H8 b. G1 E `2 X
</html>
6 T$ |7 x- g( [7 n7 F/ h& Q. _7 C
百分比适应:& J X6 E% ^& ] Q K9 D$ W
以下是引用片段：) p: }; W; v! ~0 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ! b( x8 X H4 a% [0 @$ F* s
<html xmlns="http://www.w3.org/1999/xhtml";>
& `7 I7 I" i9 J R$ r7 @( P<head>
0 _ D$ h, H8 R0 C& T5 g# J# ]' R<meta http-equiv="Content-Type" c />
$ N9 u! H4 h) ?<title>css2.0 VS ie</title> 9 ?* [3 \8 _4 S7 g$ U
<style type="text/css">
' @1 W* n- S; q, Q; Q2 [<!-- 3 ?1 W9 Z2 P7 N0 R' v
body {
1 k: P* b* J4 s1 u% j; P A' m3 @font-size: 12px;
$ m4 K1 ?8 x& f' E1 I8 H6 S) f, Stext-align: center;
4 [& e1 _7 O& }, F$ y2 L' ]' @margin: 0px; 1 W. ?; a' M. U- d0 G' }9 q
padding: 0px;
7 Q- s9 {% ~6 `; ^, c} / ~4 o* I, @7 p; S. ]
#pic{ ) Q, A' U& |8 [9 ^
margin:0 auto; ' Q A; n' K+ i& R, U8 {* h
width:800px;
; @# H2 `0 i4 Q3 v: g# e padding:0;
! w& e9 {7 S: Q& W1 y border:1px solid #333;
* A7 h9 e& N7 C1 K$ q! L } ) X* X( A% d3 ^7 e$ }
#pic img{
: |7 F& O0 B' F/ ~) O; x: X max-width:780px;
6 v1 a" E. M# E# o+ c# I6 M7 Uwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
* a9 S$ {7 T& I0 Mborder:1px dashed #000;
- h( q" R9 @5 l; g% D" V}
{2 y' u+ g8 l* B# ]--> 2 ?1 ?' ~! K, {( |5 F
</style> + v: g; v; _6 h- u
</head>
' D. F+ f; P2 q, v; z) ]( j% R<body>
+ y9 P; F5 O# _1 h. `<div id="pic">
2 A1 M* _; b0 R/ E& X* M3 Z. q1 _ w" u<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( J" y1 [, b( q4 u( W* b* H
</div>
# s, I! f+ Y, ` _/ S( F</body> . ~' D) ?/ V! ?. o& W/ V
</html> |
|
发表于 2007-12-8 14:55
| 