|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14331
- 金币
- 2451
- 威望
- 1647
- 贡献
- 1399
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
0 F' n6 y7 P r, s( ~7 R% a9 P关键在于：max-width:780px;以及下面那行。7 k q+ L; M- @# M. Q) ?
固定像素适应:- e3 T/ K7 J$ Z4 l& n3 s
/ U9 I V0 m: y, f- z* S- hdotted; 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> 以下是引用片段： @( Q1 d$ N$ H
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 q/ @7 A% _ M- b# L3 n& R
<html xmlns="http://www.w3.org/1999/xhtml";> 6 k i8 m, S% m2 h
<head> 9 ]$ b* R9 s( A1 e0 p
<meta http-equiv="Content-Type" c />
R, C D2 o4 W1 s `; y. l<title>css2.0 VS ie</title> # C$ b! K5 c+ d+ v
<style type="text/css">
. W! U6 `* }( q. l% q2 f<!--
; m( V5 y0 }" e0 N3 f+ {, k1 mbody {
, P) v( U8 ~' ]9 ^" c7 p8 dfont-size: 12px;
& ^' [* r8 Q' q! Ktext-align: center; 7 N- U: T" t9 P% e
margin: 0px; % u8 j) d( l3 A
padding: 0px; + P; R q K5 ~ } p- x' m
}
4 U: P I$ x' O( V; ]% B! b#pic{ - p* A" Q) n$ E
margin:0 auto; 1 }* N8 j0 O$ { d! g/ Y. z
width:800px; 3 U0 g) @ h3 g* H* B
padding:0; ' T: y* b; i' x- {, \
border:1px solid #333;
+ c& b8 u5 Y$ s9 J } , b! W1 J# R s2 y" F- x$ [! K P5 L. P* |
#pic img{ , T5 Z: R# N* P1 K
max-width:780px; * o1 A2 T. p# @# u2 V3 F. G
width:expression(document.body.clientWidth > 780? "780px": "auto" );
' x3 w" d$ w1 Yborder:1px dashed #000; 2 T" k7 d% j( z, ]" z' [2 R9 r. V
}
c' n* v! n0 F$ k% N" Y% S--> 4 Z/ S. S8 R7 N# q
</style> 4 Z0 o3 S+ J1 K. F2 f7 l
</head>
# a6 x: H/ n8 ~4 `<body>
- E! [6 H- B6 Y( C' G) j<div id="pic"> - g2 `7 W4 \8 H2 M
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
/ k8 [/ G! m# _2 @5 v$ j</div>
& Q- W u; \2 z8 h% [$ p; M</body> * Z% L; ] G+ f) E4 t6 j
</html>
8 s$ g( p; |$ r! d- W6 p* {! x+ {# E! h) @* T' ]! Z9 _$ l
百分比适应:
% S7 z z% b" B& }以下是引用片段：
3 x7 q5 N/ e2 e; [& H/ |<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + Y: L B5 G! A4 c# E9 F! K
<html xmlns="http://www.w3.org/1999/xhtml";> 0 f/ l7 I# J# ]* C
<head>
( b, @# E$ T7 n; c: M6 T! Y0 y<meta http-equiv="Content-Type" c /> / i7 Y" X+ f7 g! M9 s% Z
<title>css2.0 VS ie</title> 0 h! _8 O6 c7 G; D' D+ F- Q# U: s( |
<style type="text/css"> ; h/ c4 n: Y: z; [5 @" d
<!--
5 |/ t! t. E) D# Y3 rbody { 4 `) X7 n! ?8 c" b; [! E
font-size: 12px;
5 j0 b2 i! ^4 ~* a' R. _# Ztext-align: center; ) G5 ^( |/ G, b" Z- u" }. Z( ?
margin: 0px; 9 e# k! k6 @& M2 Q
padding: 0px; ' w; O4 S* Z; d. [
} % D. H2 y1 o$ O' `# k. o& U9 y
#pic{
6 _2 c/ A6 G. d3 M0 u# k margin:0 auto; / M( m' K$ R2 F
width:800px;
$ U! Q- D3 w9 n! Z8 h padding:0;
& z H2 R% a$ r+ J4 |" F border:1px solid #333;
0 f; |7 p- ?2 q- l! j }
! d: N' ^7 ^( ]- f2 f+ M5 P#pic img{
' e( Z5 H2 ?' A+ E+ D+ H! }; c max-width:780px; " _- ?5 v: u: m. ?" A+ m
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); & h- z+ ?( K5 j) W( E
border:1px dashed #000;
' u! S9 q/ U4 `} 5 H& o* B0 p( u
-->
; r1 S* e6 a j, E! w3 J! Q( n</style> 3 F* ~) U# `, \3 x$ m+ G6 s; r
</head> % H$ I; A7 i. \7 D! J
<body> ' b$ [1 j3 c8 f+ G
<div id="pic">
# O7 M/ ` U3 k7 k* u4 ` F<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
7 l! ^2 v" Q4 E L</div>
6 u9 Y1 q2 j2 h6 d3 J</body>
4 x3 s5 \3 y5 {4 X$ G; t" [1 \6 A</html> |
|
发表于 2007-12-8 14:55
| 