|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14387
- 金币
- 2479
- 威望
- 1647
- 贡献
- 1427
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
- i* @: J' N- P3 X关键在于：max-width:780px;以及下面那行。/ h1 E) h' Y# A4 p) C, [
固定像素适应:
2 ^ O, \& d1 B5 ?1 r/ T+ z4 A) G1 q7 s' V+ r' j
dotted; 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> 以下是引用片段：
( s0 r( ]) V# G1 @$ ?) w<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + J' h8 H8 E3 X0 {8 R% o* [& d
<html xmlns="http://www.w3.org/1999/xhtml";> 3 F" t( D- v+ i# F3 y$ w
<head> 4 Z& |% Y& @ W, T5 N2 J0 { g
<meta http-equiv="Content-Type" c /> # J( ~. z7 ?9 l7 l: n2 `
<title>css2.0 VS ie</title> ) X& @ y' Z$ H, R
<style type="text/css"> . l1 b9 \3 }' [4 }0 N
<!-- ( I+ X1 \6 E9 U6 D2 k; v
body {
% Q9 B7 ~9 x& qfont-size: 12px;
- {: K, S1 X; X" O9 t) _6 a+ [text-align: center;
6 J% G3 L5 P3 T, w, k$ w7 [8 Mmargin: 0px;
; P/ ^* m( O5 \ ^3 Gpadding: 0px; 8 W% Y6 z4 t1 p" e: W
}
: q7 ^0 ^" e/ ^: f#pic{ . A+ O' }# W& D q# `! ~3 o
margin:0 auto; * U9 G# U8 j( C* H& W
width:800px; % G% l- R2 x$ v! @) V R( x
padding:0;
; b% d$ V8 d1 g+ h3 V( K border:1px solid #333;
Z# C! t) \$ p2 j% x }
8 l8 U G) y$ Z }#pic img{
! |* C! f% N y* c2 E' A& T4 { max-width:780px; ( U, w- N# W3 f
width:expression(document.body.clientWidth > 780? "780px": "auto" );
$ ]0 } m1 G/ g& |& R3 y( W; iborder:1px dashed #000;
( M+ e* w7 W/ z' O3 Q% n}
& z6 F, k' b. O2 {0 x7 T2 H-->
+ q8 I9 C( x$ [</style>
$ X+ X2 S( b' T6 z</head>
7 L, m7 x/ R+ p' u& x& k, x, u' Y* y3 s; e<body>
# f" r$ e# m- k. G# G<div id="pic">
6 i8 E% A& E% H' o2 E" ^<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> " V5 |8 D6 `. Q4 n/ S: f' h
</div> ) }+ l/ n/ G _9 H, P. {+ D( w7 j
</body> 6 R1 U! D9 g2 {% i/ e
</html> 7 i* [& e2 d" }
. F7 }1 W- v( A- M# L g2 |百分比适应:( T* Z+ L. o0 ]4 k" e( E
以下是引用片段：6 V2 f1 _( u9 ~# h: c7 S) g
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + G9 A6 X: {8 }; n, }0 V( b5 a
<html xmlns="http://www.w3.org/1999/xhtml";> , P9 Y' W/ {/ p3 u Y
<head> 9 S0 }3 z, }7 l' L. l
<meta http-equiv="Content-Type" c />
2 D6 N; ]3 ~9 Q$ I; v1 Q! g<title>css2.0 VS ie</title> 9 H6 F# b$ D+ S: q' Q7 C2 b- [
<style type="text/css"> / x; G! z0 j1 v& b' k" _- p
<!--
; x$ _& X' L# m0 Z# Xbody {
+ T* A* O5 Q: Nfont-size: 12px; 8 c+ S2 V3 A0 y; r6 ]! _
text-align: center; ! N& m5 W& L/ z% H, t
margin: 0px;
0 M. A2 e( u4 M" h( e- Opadding: 0px;
3 o3 R: |4 |1 \( v) N* X} . A( o" d+ I1 b+ Y3 j8 }
#pic{
w, t9 {8 [; B margin:0 auto;
! b0 \+ v, ?7 Q4 ^/ W% a# h8 H' P1 o width:800px; 9 ~5 Y6 x+ j& ?: W- Z
padding:0;
& [5 T9 P' `7 K8 w) W, x border:1px solid #333;
3 k- D1 d5 d' e } 3 Q- |: }* V6 G$ n @5 ?
#pic img{ 6 Y f7 y" B8 B* J% a9 b2 ] |
max-width:780px; & S6 ?. f, V! [+ D( M
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ! q/ o2 U) \) ~& k) I$ v
border:1px dashed #000; 0 Y/ t4 B- M- e& C" g# J# {( s* B
} ) X+ Z! x' @8 A# m
--> ( m3 A/ u6 \& W8 ]: \& @4 a) ]
</style>
7 q2 o, X* | b5 w</head>
4 |( C1 n+ c/ H7 V<body>
( o) _% f( O$ p" o5 H- k<div id="pic"> 0 g, e8 `# ?, m- _+ h8 S9 t- z
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> & a8 [! H4 U3 `1 k( f4 i) g
</div>
# R3 v$ } ~, Q' E# \</body> 4 G" D8 A! _; \/ z
</html> |
|
发表于 2007-12-8 14:55
| 