|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14191
- 金币
- 2386
- 威望
- 1647
- 贡献
- 1334
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
% i: m' O/ b* R+ T2 d: c; a关键在于：max-width:780px;以及下面那行。 @4 @; A3 B4 m1 e" E& q$ q R( [
固定像素适应:$ S% O5 m6 P7 R
3 P0 j C+ I9 I+ C! U3 Qdotted; 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> 以下是引用片段：$ i/ g; X* v: j) N$ F" E* u; r
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 K" J$ l- V& k- ^1 T3 I<html xmlns="http://www.w3.org/1999/xhtml";>
; }# I ` G" A+ ?3 z8 w! ~# x<head>
0 Q- b% m n1 ?! X4 T# B, a# T7 [<meta http-equiv="Content-Type" c />
8 ]) W9 v- C8 [4 j5 N$ v<title>css2.0 VS ie</title>
- V4 x d# D6 u0 \* R0 K2 {<style type="text/css">
# a0 u: s. r `4 w% c<!-- 8 R7 _& x5 D% m$ x4 a0 u4 v# G* o
body {
% L T# n) ]2 B6 M* |font-size: 12px; S1 G7 Q1 `! x$ {
text-align: center; , r+ o9 c$ p/ j0 W
margin: 0px;
3 Z4 z/ F! |: bpadding: 0px;
K1 m9 l! v: O# f" v- ~}
5 L. b4 {7 l; o: d#pic{
) J# {3 F: Y' N: C margin:0 auto;
. E8 i5 S. i/ o3 X' l width:800px;
5 `: ]. W6 M8 A0 ?$ c6 I padding:0;
' a t( g; `* q% a j% x border:1px solid #333;
2 T" Q' Q! e5 N; _ _ } 9 S5 y0 f5 D0 X1 Z
#pic img{ ( k7 H5 \5 _9 u- f1 s5 g
max-width:780px; & O! | I5 r z9 e( r E
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 4 S. O4 S2 q5 ]) {2 Y8 b2 }7 J* G- y: N
border:1px dashed #000; & ]1 w( |+ c/ z" Q3 W6 r D
}
0 j- L/ p4 P2 C: J u-->
' W( {7 {6 Y9 Q1 G8 K</style> 1 K& H' e" C- M4 W2 z* R
</head>
+ {4 h5 s/ i5 a<body>
3 s0 R# M! t b9 ?0 \& ?<div id="pic">
. k! R- b% T, O0 V- d& w<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + T% P2 `' D8 c4 l8 F) K
</div> $ D4 e+ g8 H' D% `4 |6 Y
</body> 1 }. O% p! }; ~2 q% O6 g* m
</html> % w- W0 {5 ]' c/ c' d% Q
* l' e" L# f y9 p& Q1 s
百分比适应:2 k) `1 g% u* l+ t: v
以下是引用片段：
8 O8 W: R( D& e# @! I: V( b<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" J8 y! }1 U+ U8 ?6 x<html xmlns="http://www.w3.org/1999/xhtml";> . D$ Z' ~$ ] B2 m; `2 w9 B) o5 H
<head>
3 ^- R. h7 M% M0 @" w<meta http-equiv="Content-Type" c /> & S- ?6 i6 u% f x5 E8 |. O
<title>css2.0 VS ie</title> . X$ z1 E: u* o" H% w/ x
<style type="text/css"> 2 x9 K3 d( A6 c; X5 H5 x2 G% C7 W
<!--
/ s$ p- H7 q' n( I, a7 v3 pbody {
' g5 o9 p r9 j$ H0 M L6 n9 lfont-size: 12px;
8 G5 X) |! f* b, ?2 Z2 Ttext-align: center; " T* F ~8 `: _5 j d# |' e
margin: 0px; 6 b0 v% S* W, h9 o
padding: 0px; 6 |' |5 v$ @, o
}
' M. B* C4 t9 k( c- f1 v. w#pic{
, V S) |/ J9 q( }' f" z) x margin:0 auto;
3 {! ]+ q: ^, s- ]* N width:800px; 0 i6 [, D- D: j6 B0 l" W/ t
padding:0; . \$ D/ }! U; B" B' L( H
border:1px solid #333;
8 O X* o1 f E j' P- U' D- f9 q }
: w$ q7 N1 B" T#pic img{
; M9 y2 W) D& N" j9 ?" }; Z8 i max-width:780px; 8 p J9 y$ D% y: |% R7 c! @0 k/ j
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); / _/ E7 j% o$ {
border:1px dashed #000; 6 T1 a9 b. r& ]4 w8 y3 ~
} - k! }- {+ y0 @9 z" I& T% S
--> 2 F6 w- v7 V) R" h. w5 {
</style> 9 M" a9 L6 z% ~ I( _, h, e
</head>
~& X% H, p) q$ ?4 P& I8 L" J4 q<body> ) J- ^0 l- w3 S. P' n
<div id="pic">
! A6 {1 J# V. s _* {1 Y<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
) k; S) R, _0 v& e</div>
0 J3 F7 y0 R$ ^0 k</body>
+ n) ?* B/ C8 S+ v. O; m</html> |
|
发表于 2007-12-8 14:55
| 