|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 L* O% V1 k# \# W$ Y' Y关键在于：max-width:780px;以及下面那行。
4 k% q" e7 `2 C3 ], [固定像素适应:
. U; h# W1 d: f" C& _$ t. I Q1 p# u- `- k
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> 以下是引用片段：
2 [7 N/ W' T4 d) K# A% ^; i. t<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, x8 t) ?: q; v4 `7 t9 f. y5 d<html xmlns="http://www.w3.org/1999/xhtml";>
$ J, ]3 d" H: L8 W<head> - z, { L7 z. D1 _ p
<meta http-equiv="Content-Type" c />
5 D" P' w7 N. g% m5 C# C<title>css2.0 VS ie</title>
$ o1 E) R( ^8 Q- P% n: ^<style type="text/css">
, ` P2 l, b" t- I" j, e/ m$ {<!--
; n0 W" Q" h/ i' A+ sbody { y l n" T9 c
font-size: 12px; . j; D, |, O5 y ?5 J; H
text-align: center;
d( C& y+ t( R* i! {& Emargin: 0px;
9 B1 G% n7 ~5 I0 d& g: p2 I2 upadding: 0px; % j" R! X3 H6 x5 z& u% e
}
& `: |5 n6 [- i0 t#pic{ 9 a3 |; R6 z( z8 h+ p/ d
margin:0 auto; ( H! u1 {0 j# Y
width:800px; 0 r* I7 [* K7 `
padding:0; ! t s% S: a; W8 Z7 _ }
border:1px solid #333;
! M2 E4 [1 y8 P; G8 r$ x } $ B" H+ d, F) w {4 R3 e
#pic img{ + J- C' _; l4 z. g* h
max-width:780px; 0 e3 L9 l- r" [: t2 `
width:expression(document.body.clientWidth > 780? "780px": "auto" );
: _* f) {3 D- k4 w7 J3 x' aborder:1px dashed #000;
* ^; a$ y- N& C3 X, u. o}
( u/ i; m# g' V; i3 [+ i; @ m--> ; M2 o, W, h8 D8 n% }2 L
</style> 0 j. C3 u [& N* h" c$ i, m
</head> 0 b3 L9 y2 L% k3 ^0 z* S9 C
<body>
+ w( k' l, e6 K2 m<div id="pic"> 7 l4 u- G' f; t6 n$ j8 u6 g
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> . U* N1 z0 w) q1 Q
</div> # p6 q5 Z% r0 c% y0 _
</body>
. {$ k) L( }* w6 A. x. G+ r1 P8 g8 ^</html> " S0 @3 V7 A! c
3 a+ Y0 G" c% W百分比适应:( R- R# `5 ^$ {& C& M3 u& D& ~7 w
以下是引用片段：
. E, H$ x. C0 p5 }<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 4 t) O, y$ T& L4 f% f8 p
<html xmlns="http://www.w3.org/1999/xhtml";> 3 y7 M0 i2 L1 b4 G+ _
<head>
$ p! `2 O2 a+ n7 o. g0 @. C<meta http-equiv="Content-Type" c /> ]6 r: `5 P M* o
<title>css2.0 VS ie</title>
& v( X8 s8 s" G8 |2 P<style type="text/css">
3 h; J) c3 z' i& G& p<!-- 0 x+ l8 t3 B# [, k
body {
- b7 @7 o } o7 x# \font-size: 12px; # s6 _, @, j# p( R( V# h' P
text-align: center; 0 W. c+ E; p8 Q. A
margin: 0px;
/ r( g8 ~0 c) apadding: 0px; 2 s# y$ c" s5 Y1 e9 `4 e$ U5 u( ~! I
} ! u" M+ ~5 u- z5 u0 Q; H
#pic{ $ J8 k1 [" g+ X. L0 r& G! o
margin:0 auto; , i/ t4 p: F6 Y8 U2 L: d+ x( V: W+ f
width:800px; - I H3 C; V& G- i1 h
padding:0;
H+ ^ V$ Q2 L' d- P7 T; g( v border:1px solid #333; 9 V% ~( H, o! }( v
} 0 H7 O% V% }; I2 b6 U2 i9 X. ^
#pic img{
1 @) m# x* t: ~: k max-width:780px;
: ^/ [, O' @* p* owidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); # ?% a+ V9 }( h* @# G- p. x8 k( ?
border:1px dashed #000;
: @( q$ G' e" D8 ^) B& `}
+ }1 M3 x' _7 j" k& u" u! r1 X2 Z5 P-->
1 [6 n7 S$ U V0 Y</style> " a0 k& w& Y( K
</head>
h) N2 p7 t# h+ h9 t<body>
* }1 F; J9 t" b<div id="pic"> 4 |5 g/ U4 L, z0 D! ~* {* Y
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( r- Y" _! x2 [0 y
</div> 2 b: f# L4 Y( Y1 u
</body> 3 g4 o, Z* F/ Q6 ~$ b M. _7 d
</html> |
|
发表于 2007-12-8 14:55
| 