|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。* I4 J+ Z6 F% t2 F7 M
关键在于：max-width:780px;以及下面那行。
' K: |5 C) U/ u+ z& O, d固定像素适应:
, B' s- M6 E4 _% q; G7 L6 L! g7 X
' ?7 ~* j6 Q2 y& Odotted; 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> 以下是引用片段：
, T5 J% J' ^* X1 a% G4 y<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> H1 q* K8 {; R) z
<html xmlns="http://www.w3.org/1999/xhtml";> 0 ^2 R1 h n# ?
<head> ; t6 d- _& ~/ U% w$ G* Y* L+ x2 Y
<meta http-equiv="Content-Type" c />
: f- t/ B& b3 e: Z<title>css2.0 VS ie</title>
# z% r* M' q% [ O<style type="text/css"> 7 O- p5 b P) e* v3 }% J- [
<!--
7 u( J* Z% |' v0 [4 C; v/ Gbody { 0 {) n$ Y& f# y
font-size: 12px; 5 x, }1 r* J! M8 E% X2 X) N
text-align: center;
* q' o) h) j$ b2 T. ~6 e3 d& e2 ~margin: 0px; & p! A) `! u K- Z1 t6 a* B
padding: 0px;
3 B6 j1 K, x w3 q5 T$ m}
( b3 z5 v. S9 m! U- K4 W3 D#pic{
: q4 i; Z( O' [$ G4 }& `2 ~1 x margin:0 auto; * H6 j: F. Z; F" g2 S0 h
width:800px;
4 y7 @: |$ b& L7 I3 J+ z% `% p h' f! f padding:0; . k! ^0 @( m, w3 J% A; r4 Q2 p4 \
border:1px solid #333; , Y0 K) q9 H- p9 K5 d+ g. ]! v
}
4 Y2 y& ], b$ r, U; e( i#pic img{ 7 a- o* s+ l8 W2 u( c( ~
max-width:780px;
7 z' [0 g7 x! `5 Y4 T; k7 l1 twidth:expression(document.body.clientWidth > 780? "780px": "auto" ); # \/ |7 l4 ^8 h
border:1px dashed #000;
' A$ H# H5 k- L- W* m}
% r3 b# w m( L% {& o' F5 y--> 5 |# e* [1 ~% u( @! X
</style> : b; O2 E% S Z8 ]" K3 }: y7 Q' m
</head>
! W* y9 O2 O0 |5 [- T<body> * V5 J6 }' f" @! ]9 r2 W j! O
<div id="pic">
9 V. |4 _9 o5 D. w+ n<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ! U' ?6 v* g' u4 \) K# J0 V
</div>
4 J4 _5 U$ I* ]</body> ) b# l! G0 ^( U; U! d
</html>
`# D: @3 k/ ~, Y/ ]7 Z5 V: F$ P F9 F- P a1 Y5 I/ [
百分比适应:
1 V/ R& c# T0 B. V/ D9 r) T以下是引用片段：
: D* V" e6 @" b3 X/ u<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 k# n* Y- c; \2 `7 m, ?<html xmlns="http://www.w3.org/1999/xhtml";>
- J) D* k1 X5 S& }) |8 a1 ?9 H5 u. X<head>
- u6 ^! ^3 y% ]0 W, I5 O<meta http-equiv="Content-Type" c />
8 X; h2 R: {& I z; b* D<title>css2.0 VS ie</title> % {2 O- z( {! t @* N
<style type="text/css"> & y2 _0 M- r2 o4 G3 ~5 G
<!-- . _ f7 L- b' s0 \
body { $ f |6 J* [$ U4 V0 y/ y0 |
font-size: 12px; R- [2 Y; f; S$ m7 ~
text-align: center;
* k: `) i6 h9 S, qmargin: 0px; ; s6 `' e) I( k: w5 p7 ^/ h
padding: 0px;
: O: A/ m% G, Q}
# k- W( n; n9 J6 z% i& ~9 E7 a/ O#pic{ ' J* f; v4 W" a! T+ P. D P
margin:0 auto; . O% B0 c' z; L' G
width:800px;
' d) f3 _" \# A padding:0; ) e1 g( [9 o( Q: H& k; o
border:1px solid #333;
. T: a! O5 @1 ~0 o# J' [' N }
7 x: t) J) C' Z, d#pic img{
0 b( I4 _2 _* T+ V1 z8 \5 c6 h8 X# ` max-width:780px;
1 Z2 ^* s. s' Q, O- f- g2 a6 ?; awidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 2 |2 p2 h& \( c6 v0 `$ v& l
border:1px dashed #000; ! e E- y3 a, _! O; X) `
}
! q8 q) {4 |$ s8 T! x--> 6 k5 k" m6 T- I
</style> 6 I: b# `) q. N1 g( `
</head> $ V9 `: c# D0 S. c+ Q+ f9 n9 O7 r
<body> ) a6 a4 W5 |2 u
<div id="pic">
2 @, x: Z, R, y0 i# |<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
$ ` n& j* C7 Y</div> ! ?4 W5 n7 X' Q/ A( F$ ~: e
</body> ) u4 k+ F& P, u1 C% I6 v% a
</html> |
|
发表于 2007-12-8 14:55
| 