|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14395
- 金币
- 2483
- 威望
- 1647
- 贡献
- 1431
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
$ { h$ J4 l3 g* l( W1 F9 D- s5 w/ j关键在于：max-width:780px;以及下面那行。
6 R3 e5 p) g3 @- v% V2 i5 [0 \固定像素适应:
: z$ n/ M+ J% K0 S6 L! ~+ R- U7 W% \/ @1 ]! e3 I; S
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> 以下是引用片段：
- b, M) n7 e s" v1 l<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ' k, U/ f+ u2 ?( \4 ?
<html xmlns="http://www.w3.org/1999/xhtml";> 5 Y& x* q- \: ?' Q4 V% B7 |8 s$ e4 n
<head>
- P" L2 a% c" B3 s1 T% x: P<meta http-equiv="Content-Type" c />
; o6 i$ d& E" y3 O/ o+ _. _<title>css2.0 VS ie</title>
, s- u" w5 c! C! ?<style type="text/css"> ' N9 Z! o4 G6 x8 L# [
<!-- 9 Y/ f( H; U8 |' R- w+ w
body {
# c( {. ~ d6 J! u) R4 D/ {# Efont-size: 12px; / N% Z6 K/ ]5 o% K1 |
text-align: center;
( r3 A3 {3 V, j, e! h4 A: L0 `4 D( O( zmargin: 0px;
; p; o ^1 a( U v6 |padding: 0px;
/ s# W" i \7 `. z}
8 v" |$ b5 w+ W1 U. k#pic{ $ U" z3 @5 [. V3 L. ^/ s, @8 k6 M
margin:0 auto;
+ f: _! ]! P" ~: l8 h width:800px; " I2 S. }0 X E8 N& U1 Z9 _
padding:0; ! e( u+ W9 i( e/ Y; ~" P* {
border:1px solid #333; ) r- {$ W+ h1 r0 p: g/ O
} 6 k; g- Z5 P, x, W8 I5 y$ _
#pic img{
7 f! d$ j! S; G# K max-width:780px;
/ m, y! T1 {+ z* w( N1 Fwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 5 m! m* r7 M9 m/ ?' `& A8 f
border:1px dashed #000; " L4 H3 W3 \) ~1 U) X# ]+ s
} ; i* c! H1 |2 K# M+ Z$ @2 y& D
-->
9 ? N8 o- S2 {8 c1 \</style> 9 w( _# q! K0 _
</head>
' i: F5 I; c' a. Z" A0 s$ L+ {<body>
9 P( D: s& N8 Z: M<div id="pic"> , W. c9 u7 \* M) s, q
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
$ I w% Z+ i. y# {</div>
* H4 D' b. y3 y: m# A; O- D" A</body> ) ]' n* I/ A9 t
</html> % t5 l, J8 }- _& \ `& L
7 G7 P. y/ |. r. H百分比适应:
0 @6 k& [4 c' Y5 g2 D1 h; C以下是引用片段：# s1 M+ }" \+ M$ Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 2 ]' [+ p, {6 U6 O
<html xmlns="http://www.w3.org/1999/xhtml";>
$ e* e) Q4 n! A% P. A$ }# v2 P<head> 8 f/ \3 D( `+ N9 o; @' j
<meta http-equiv="Content-Type" c />
1 g& ^$ E# b/ E* ~4 U, J<title>css2.0 VS ie</title> , R1 @$ o4 I) H# r+ R
<style type="text/css"> ; t- T- z8 q% _' N/ k s. Z
<!-- # i+ Y) A1 k% K
body { & _, r: K' e e, a. _
font-size: 12px; 6 g0 l: e- m6 t# m8 P
text-align: center; ; i/ o0 N: | r2 \) Z# n
margin: 0px;
% v. M& l( b7 J) {" Y! dpadding: 0px; 3 c( W( C4 ]* h
}
+ m2 a9 V4 Q" s* `8 Z& g& \' q#pic{
2 C- f+ _- ]% L" R' ?! B margin:0 auto; 2 O8 G7 D' e: D% B& _" t4 ~
width:800px;
/ @: T& z2 |/ Y4 k/ z0 X* q+ H padding:0;
$ [% P( V5 l& @( J9 f1 ^1 F! | border:1px solid #333;
4 f+ I( R q2 x+ @6 Y } / G* M: x! `" Q/ A% Q- p) Y1 H
#pic img{
/ F4 q& s% s$ r2 x" u. k max-width:780px;
& W$ _% {. Z* }width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); - z5 M2 {8 N+ e% H6 e u& N* ~
border:1px dashed #000; ! ~9 O8 A3 i- U
}
/ w% F& a w5 S C# _7 y--> ; J; o' T% D0 h9 V z
</style>
% K. w# ~. P$ _* `% H</head> & q$ n- b/ ^; G; {! @
<body>
0 o9 @8 l' b( Y- s$ \! d8 j<div id="pic">
; m% B( J* b" V) N" j<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
2 l; ]* r! s% Q( `+ C</div>
5 d: o2 A* ^: b</body>
! T' H+ X7 Z) t8 H</html> |
|
发表于 2007-12-8 14:55
| 