|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。' B9 |# m$ ~2 R0 V: C
关键在于：max-width:780px;以及下面那行。
4 h) j2 F, u) q& f- ^$ J3 a. S `1 b固定像素适应:
8 `8 b7 x$ F. G3 B* o* `* P
) \- Q4 b4 }: m) 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> 以下是引用片段：
* k% D9 X" I; g4 p2 P( \<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 3 Z' T6 o) _3 S% m' X# ?" r
<html xmlns="http://www.w3.org/1999/xhtml";> 2 I/ d4 ~1 P s. w2 H1 O
<head>
$ l& D7 d1 E3 |6 k5 E( P6 A9 v<meta http-equiv="Content-Type" c />
4 n. T& T" e" ~* ]( k<title>css2.0 VS ie</title> , A6 Z" L8 _9 w- I
<style type="text/css"> ) i4 Y* R3 g1 R6 c
<!-- 6 y% _5 \% ?" K4 T
body {
2 o/ s/ |% U3 T$ ^font-size: 12px;
3 m7 T3 ~* B. ptext-align: center; 3 l8 b' v0 a% G1 f# b
margin: 0px;
$ d% S5 @5 c/ r1 R" jpadding: 0px;
. i& n) `% M) E! h9 P; h# I* d}
) C+ J' L: Y; f/ `- c5 b- I#pic{ - J, s- u+ o6 g# R+ O
margin:0 auto;
a2 i$ t" @2 O, s! j1 G% v5 P* L width:800px;
3 }- N0 ~# \ n2 f padding:0; 1 w& y& u* M- l" ^! @4 Y/ B0 @( U
border:1px solid #333;
8 V, R; n3 s4 e O. |5 W1 c }
, @( T- w% O5 p( m" I% `6 a#pic img{
- j2 h& f9 y! U" P% S( E; Y$ z max-width:780px;
! V# l" X3 q, \ l4 `width:expression(document.body.clientWidth > 780? "780px": "auto" ); 5 k& z+ T: x3 l4 c; S& w- p- U
border:1px dashed #000; 5 \! |* c% P( Y5 i! _
} - u* f4 u# M* }
--> : X9 T+ p6 L6 q; G3 k7 I, d
</style> : N0 Q: w! R( u; u- K: m
</head> : E* q- e1 z2 {
<body> 6 c( D) |2 j/ \4 d
<div id="pic"> 2 z; n# l5 ?3 D E; Q1 C& L
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
8 Z1 |- J& f0 L3 G7 C( n" H</div>
- }% f! J% E; R' S6 T/ y</body>
* J! f0 N z# [* O q6 L9 ?9 K</html>
! v0 b8 l0 u. |& c8 T/ H) \: Z2 Q: S9 u5 s# L4 n
百分比适应:3 K" W6 G$ `) W: J. k b! U/ ~
以下是引用片段：1 m4 H$ \6 x+ O6 a" U
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" Q* `7 l5 V+ l# r; x3 ~<html xmlns="http://www.w3.org/1999/xhtml";>
, ]+ h* k2 j0 y2 f f. t<head> 4 R8 N, s) x4 D* [6 J9 h
<meta http-equiv="Content-Type" c /> 9 f G# `+ K1 W" ^0 K
<title>css2.0 VS ie</title>
1 @+ A, \( ^+ b, d/ w5 G W<style type="text/css"> " E* z1 e- \* b- z: j% S8 @& X
<!--
) p+ R1 q0 u* i/ ^: j2 {$ Fbody {
6 V& \% Q; I' K3 lfont-size: 12px;
0 p" f- t/ N8 e9 ^* dtext-align: center;
# `4 A0 J$ |! `- Tmargin: 0px; # c: H6 P" A e p9 p! \0 Y
padding: 0px; * ?0 R& @7 j' \" j. O2 x+ A$ H
} * C1 K1 s& J" c$ t, r/ _: k2 e
#pic{ & o0 ^; i8 G8 g1 V1 n" t
margin:0 auto;
3 V$ v% T& P) J) r, C+ s4 w width:800px;
: c# T6 a u L- I) N' t padding:0; ) N+ W9 o1 h+ p3 ^' z% L
border:1px solid #333; $ d; A; y O3 S* a _7 i6 {
} ! e3 v" m) R6 A' v/ Q) x
#pic img{ " }9 d$ \" i/ ^/ k! s
max-width:780px; 3 M% M8 C% T5 C% V- [; h
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); / o2 C: O3 t5 ?6 f+ z* X$ i- {
border:1px dashed #000; 9 H+ O& _+ w t
} ! C, k+ {$ D" x) J. u5 W
-->
! R# x: d1 x. l( b. ^' H</style>
. D( f' S; Z% ^/ V</head> 2 x5 \( n# _; v; T$ q8 w0 C5 S
<body> " S; a6 n8 l ^& J5 I
<div id="pic">
: y5 K$ W* I. `$ d<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
! ]: n+ Y4 i. z" ?( L</div>
9 `$ T6 Y6 s, ~/ G8 i</body>
~9 P f# q0 `. ` R</html> |
|
发表于 2007-12-8 14:55
| 