|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14191
- 金币
- 2386
- 威望
- 1647
- 贡献
- 1334
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。2 t. {: l! u) y4 D
关键在于：max-width:780px;以及下面那行。, V1 M) ]1 d ]* G9 b
固定像素适应:
. [3 o3 a- T) Q. F8 ?, e2 ^6 q) _* _# D
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> 以下是引用片段：$ D8 B4 z( k- z8 o5 Z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
) q% b3 \* x% O0 Y a& j0 x# r7 q$ a<html xmlns="http://www.w3.org/1999/xhtml";>
; T3 W" ]. w) G# X% L/ R0 f<head>
" J3 {0 ^9 Q: ~4 F" H<meta http-equiv="Content-Type" c /> ! f5 O. n Y% a7 p
<title>css2.0 VS ie</title> 6 o( P- B% C. Z4 K6 `. k/ E
<style type="text/css">
' s! v+ F5 U5 H# Z2 ]! \5 g9 K<!-- ( {4 u8 I1 {: P' f+ T: t
body {
9 Z( ~* {; m) c2 u9 ufont-size: 12px;
, I2 P* `! l' D6 l% ztext-align: center; + _9 ]0 K |. Z1 H5 A
margin: 0px; % w- V3 w4 Y! A) J8 Y
padding: 0px; & X2 K* A) D4 U& Z, B7 H; K
} ! `5 H+ [7 c" o8 E% w9 ~
#pic{ 5 C! ^ K: t, [1 ~1 Y# ?* l; b, s
margin:0 auto; , c/ q' K0 e5 d6 J$ w" ]4 B
width:800px;
" t E% [5 e0 [, ^ a" l# s3 Q padding:0;
/ Q% C" p6 [& |. G T! ? border:1px solid #333;
; j% p) w# X# j9 x# Z) c6 ]6 g }
: S3 T7 |3 o0 D ?#pic img{ 2 M$ G$ F0 ?' L
max-width:780px;
$ Y- u& W9 i2 {% a# i8 Nwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
0 M9 ?4 g* p6 E3 F0 q! s1 ^ Yborder:1px dashed #000; : @4 A i) {, p& P
}
. B0 R% o2 i1 \- w c/ V-->
+ y3 w* r8 H& {8 K9 Q* C</style>
. l! P7 G! J7 _2 U! X</head>
0 J+ F. E" W0 T4 e8 u<body>
P0 @8 j4 A$ J+ b" v ?- @<div id="pic">
0 a% y% B( ?/ e4 b<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 2 c4 p+ l( F1 ^" r D5 r
</div>
/ L1 [5 ~9 B6 Q. ~4 X' }</body> 5 X# R4 Z- V8 s) {3 L9 g
</html>
5 `3 e! {! N8 V) s# Q+ O9 ~
1 s, D) o2 v9 ^8 q+ A( u百分比适应:" t, e) s: Q* V4 y0 d
以下是引用片段：# d& R2 p. Z- d* E) x5 E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 4 P1 J% U7 {% S. ^8 [
<html xmlns="http://www.w3.org/1999/xhtml";> $ p6 }8 Q7 R/ F% j7 C7 h8 G
<head>
) Q( Q( X8 j% t& E# Z* Y8 s<meta http-equiv="Content-Type" c /> # v D# n+ _, _" \2 ?7 b
<title>css2.0 VS ie</title>
( I, y+ c- ?7 U9 g, `. Y z8 J<style type="text/css">
: f! n8 c8 e2 _* |2 q<!-- ; S9 E! F8 v9 }; Q
body { 1 F9 b# V4 X6 Z* U# _/ y+ A b) _
font-size: 12px;
+ A/ w; _8 [( w( m: J) B0 x8 itext-align: center;
% {- V& k. o* p) C( wmargin: 0px;
- m e- K& t1 Tpadding: 0px; : k* r7 a5 s% r: q3 ~
} x1 M% E- _; R( {, M
#pic{
9 Y# ]3 K3 I4 t margin:0 auto; 4 w' N+ N$ l$ J3 A1 F/ s1 E6 j( `1 `
width:800px; # _$ r1 B+ W. b
padding:0;
8 m3 p( T* ~" \* g4 R! l0 o border:1px solid #333; 9 x* P- O Y( G! K: Z: U
} 1 b0 i+ O' O2 S0 V
#pic img{
7 _2 J. a% R. }! b max-width:780px;
" r6 Z }5 S6 B. U* Dwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
# k+ ]' g8 z# H8 l4 U1 V zborder:1px dashed #000;
* R* M) g2 _6 X7 \0 o+ k} / Y: F n' M* t8 k: t: \
-->
2 a. B. |. `. x</style>
& [; n5 Q6 T1 t6 O' U1 g: U) q: x</head>
$ u: i2 F; N/ F: V<body> + t* ~# O3 N; M, }+ B7 T0 h
<div id="pic"> 8 @" N% s0 A( |3 ]
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
$ A$ h" B9 f7 _. H, a) T</div>
. A! g2 x; w: U</body>
* t! s" o2 K7 o9 z7 }: R9 p$ F+ Z1 f</html> |
|
发表于 2007-12-8 14:55
| 