|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
. x! G& `+ J& u& m关键在于：max-width:780px;以及下面那行。
. H( P/ @4 P9 @& W" K' @; C& q固定像素适应:
. U1 b- P s' L+ S& \
( ?/ ~3 e* i9 idotted; 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> 以下是引用片段：
. m3 i- o% R$ H<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 7 t) y' d! A2 {0 w$ [9 c
<html xmlns="http://www.w3.org/1999/xhtml";> ) F8 ?) y! ^; [! j; ]+ t' U) g! @$ @& B
<head> ) U/ v3 _: N- r* p
<meta http-equiv="Content-Type" c />
' O6 Z, J7 w2 E, L- Q<title>css2.0 VS ie</title> ) g' K$ |8 ~5 G( k3 K3 C3 L
<style type="text/css">
6 F4 C9 d* o/ t$ N; J, T" _<!--
) m" Q; V7 Z" }! v1 ]9 J: \body { ! r" [& e! D6 E# B; x* }
font-size: 12px;
9 S8 j( I. V) c+ \: `text-align: center; 2 r3 b0 P1 ^ g, W; E
margin: 0px;
9 o m! I% p1 f6 npadding: 0px;
0 i9 g2 ?1 r+ N# ?' O- Q& j i! L}
0 e" `5 Z6 K3 G# ~/ B( g#pic{
+ l5 l% u% j( R6 K& u margin:0 auto; % m! X9 ?8 T, l4 H
width:800px; * ?( _* l# p, h4 S% w0 z7 ?# ]
padding:0; 8 a- O. q$ p$ `, `1 K3 @! `3 T( n
border:1px solid #333;
- j; M5 F- c: R9 v: f7 T } ( ~9 i @8 q+ l& s1 R9 `5 x3 T! w. M
#pic img{ % Y+ p$ @" R- P5 ]5 n" ~
max-width:780px; l; r7 |: w, Z- N
width:expression(document.body.clientWidth > 780? "780px": "auto" ); + A2 Z! r$ o! h0 H L7 f
border:1px dashed #000; ; B$ E$ ]8 t& e' T; N' G0 k
}
9 T: S0 d, |) k5 R% b1 v: v$ B3 l+ c-->
' O" O6 X3 T* l1 d& ?& R: a% }</style> * x1 G8 k2 C& R+ {; {% m
</head> - P4 k1 j. @5 H; I2 {7 M2 j
<body> * [$ d* n* N; T$ T/ O' H1 c
<div id="pic"> / U7 h; y* u+ c8 A l+ ~8 \5 S
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 0 r) ^6 N1 s7 Y! d
</div>
% N' }' E( s. } K5 e</body> $ t( V" T/ j; t+ q( q
</html>
# B! k. k9 Z0 K$ N* _! j' j6 ~
百分比适应:/ u( ^5 T2 d# o, \% M& `
以下是引用片段：
! g4 Z/ ?$ ~( F" w7 D2 W$ b& @<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> * h9 {9 {1 k0 O' N) P; \& H
<html xmlns="http://www.w3.org/1999/xhtml";>
! }, F# G2 @1 Q9 b<head> # A3 B W3 Q, {* }5 |- a
<meta http-equiv="Content-Type" c /> ) i# \( f( }1 `1 a) ]1 g r
<title>css2.0 VS ie</title>
5 A! D$ A6 ]: L5 _3 e: J<style type="text/css">
! o5 l6 F! [& @7 j<!-- ! Q; o0 B: r4 D! h) N# i
body { v6 Y0 F( r" D7 X" t" b. `& r
font-size: 12px;
9 e! i, @6 O b2 a) K" `text-align: center;
6 M% l/ Z0 r# V7 O' X, {, ymargin: 0px;
- e2 W# ^0 E" P* s0 \; Rpadding: 0px; |( e8 t0 D- w, |; S" T
} ; [3 |- E3 E% `1 U) j* J2 [$ w
#pic{
+ K/ f% |$ O/ m @% V margin:0 auto; ' q o1 g7 H9 z L4 J( F8 u* I I
width:800px; ; ]4 u# z8 m% A7 t/ e
padding:0; ) `- q1 s) m2 `
border:1px solid #333;
5 g9 U* y* z! j% P% x1 D6 o" n }
; X6 S0 Y) _4 O7 z( D; d#pic img{
7 e, o% V( K9 r2 _4 I max-width:780px; / u' G: @4 o: w, v4 s/ V
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); - P: B5 X7 {7 w7 h5 i0 {4 f
border:1px dashed #000;
4 V& g( w- m. ^2 g. o} , P# ~( V8 p2 ]6 P, T% v8 p
-->
1 ]/ Z' I" C) R& O# R</style> * ?: Z' a1 J. [5 S7 q
</head>
( a) j7 T% i0 l; L; z<body>
( {, Y/ s- ]& F, }+ J& @9 j$ f" n<div id="pic"> " S; ~3 m3 N1 H/ I
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 0 r5 I& D: Z: i
</div> 3 @# x$ w$ U3 g1 w1 h5 U- V
</body> . P3 ?$ L0 x, f8 f, \
</html> |
|
发表于 2007-12-8 14:55
| 