|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14429
- 金币
- 2500
- 威望
- 1647
- 贡献
- 1448
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。9 k/ F- @+ t6 ^5 r1 t" B% P; j
关键在于：max-width:780px;以及下面那行。
2 V! s; V1 x8 i% A+ c5 U: h% c固定像素适应:" I" g8 u8 ?4 z( m/ Q" h( o1 _% Y
1 U8 y: U$ E9 M1 |% zdotted; 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> 以下是引用片段：+ Y, r7 K. K; u* y/ Q5 p- {
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> & J+ U! a% l5 X$ N& f( ^9 F
<html xmlns="http://www.w3.org/1999/xhtml";>
# R) K h) p: J! C( o" K0 s<head>
: S7 R0 Y. t; V- `! I1 I<meta http-equiv="Content-Type" c />
7 U5 c& h# P+ ^2 d<title>css2.0 VS ie</title> 0 |+ a4 U$ ]& E6 ]3 D2 ^
<style type="text/css">
* @( K$ W' R4 F! e3 p" Q' |/ ^<!--
) `: w7 s/ p. S" Vbody {
6 L, i3 _, j) I" Q9 ufont-size: 12px;
7 l6 a' N) n1 ntext-align: center;
# |1 u8 t' [, Umargin: 0px; 7 R! [5 M" F* @: w; y, o
padding: 0px;
) l! |. {3 N) Z5 F5 F4 W( o1 x8 J}
; a2 D; n& p/ ^) h5 \0 Y) E#pic{
9 h% _5 z$ P2 }) S( H margin:0 auto; ' x6 _: T& i, U: ?
width:800px;
5 r G+ O- a0 A1 ]1 l padding:0; ! s! C) F1 {8 ~7 ]5 } h7 a
border:1px solid #333;
J! n) T# n7 y$ {* z, K+ j7 Z, \ } 5 b, N& ?0 V5 f
#pic img{
$ m; W" t0 `: j9 }$ q3 P$ H$ |* k0 J max-width:780px; 3 W3 x0 l L% k$ I, G
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 4 O6 b# s8 q8 ^2 U1 L
border:1px dashed #000;
9 v& f6 j; A8 j: Q1 k0 j/ K$ o- B} / v2 `' L x1 k( ]. H: C7 r- v, F
--> 3 K( k b* }" J
</style> * s. d8 v6 c s2 ]0 y
</head>
* p& V" m) j1 X+ u- f<body>
, N! S3 h/ t( B<div id="pic"> 7 K2 \) n: Q) |1 o& r
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> , J/ E s/ G. |
</div>
, J8 M/ q, _ G# V1 P</body> 4 Q! t/ T! J, w: b; y6 F4 w' O, _
</html>
3 [! _- X' M5 R" E
1 t) c. k# o" s- b- i7 B1 Q4 M百分比适应:
5 G2 l1 }' E6 f: S N1 m以下是引用片段：) A( L1 H7 O. ^0 C2 ]' A3 g
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 [3 Q& s1 e9 A* | q. T0 l<html xmlns="http://www.w3.org/1999/xhtml";> , P) @2 t% z# a0 {! J9 i3 c
<head> , M9 F+ H( s7 _2 ` f) L
<meta http-equiv="Content-Type" c />
* z) F% v. h0 ^; s: i* M<title>css2.0 VS ie</title> ( R: n7 F4 u2 @- Z9 U
<style type="text/css">
i& z q7 b4 ^! o" I# I! \, k<!--
4 r( Y6 X/ I" B% x, Cbody {
! |1 s- b K: B) |: V6 Qfont-size: 12px;
& w( C5 {8 N, Btext-align: center;
; A! ~& \9 ~' \! {, a! omargin: 0px; 6 f2 V" Z) C/ p0 Z9 X# _0 K
padding: 0px; 4 j0 A2 v! i |9 k
}
+ P$ R$ B: I. P, I/ k+ V#pic{ % N3 P7 D. I: M1 Q: |8 [
margin:0 auto;
4 i( n" K9 ?& I width:800px; # X% E7 o' `+ O5 s
padding:0; 7 ^$ _! Y3 v1 k/ o( {# t4 G6 Q
border:1px solid #333;
" u$ f S% \7 l; Y9 h9 F } ! C) H9 l4 c' U z% ^
#pic img{
% p; X& _! ]4 V max-width:780px;
7 }8 K7 P) \8 e: e! v& X4 j1 Mwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
$ G) j8 X# d4 g8 j9 rborder:1px dashed #000;
& r, i! a) z! _0 [) O} . W) e+ J, _ t) N
--> / N E) G- f( Y, G9 `
</style>
# T$ c# [' h8 b3 g: L4 J</head>
, a+ i2 f9 W; c W5 ]1 u<body>
# U" B7 J" J/ b# u<div id="pic"> 9 ]- h0 x& Y; P% W! `8 h1 N7 v
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 {& L. g$ m& X/ c# B6 a
</div>
- B3 B& W3 S% }8 w</body> 9 e; R0 h& s- O* a) N3 V6 e# [2 w5 O
</html> |
|
发表于 2007-12-8 14:55
| 