标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
* D B/ k! l, y3 t f* u
关键在于：max-width:780px;以及下面那行。
, _' ~$ j# y! |1 a
固定像素适应:
, m$ q6 G$ I/ Q" L1 ]" ?2 Z
! w) m4 X7 [/ l% b' s- e8 U) p
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> 以下是引用片段：
& l# Q/ U1 F3 H) c, {" ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 C& H i0 H* M9 s+ G
<html xmlns="http://www.w3.org/1999/xhtml";>
% g& u/ ?+ {, p$ K8 F& b5 a q
<head>
/ d/ t$ x; r) U! k
<meta http-equiv="Content-Type" c />
$ u, E3 y8 X7 p4 z9 ?! f
<title>css2.0 VS ie</title>
. t) p+ S2 k5 p& K' T
<style type="text/css">
4 E$ V+ n& x" I0 X
<!--
6 D- N5 a# X; E1 o5 Y4 L }
body {
; P6 l$ z" N0 S
font-size: 12px;
$ t0 Q) C9 D0 W7 i+ `! m% ]7 E
text-align: center;
4 R* g3 x" C6 v v$ J: Z
margin: 0px;
$ i( ~1 R2 `% d
padding: 0px;
5 O8 c1 H' o" X9 O+ _# `* r$ u
}
& G4 u: M8 ~( K, [& H& p4 k: P
#pic{
( `% j$ w% K& b: X: o9 o
margin:0 auto;
$ M f) ^5 u$ B" l2 C) u
width:800px;
/ L) B# }( j# Q$ |" t
padding:0;
5 n( ^3 q3 M! I8 S2 z9 j& s/ L' C @
border:1px solid #333;
' D' X! w7 ~* ~4 D+ a# g5 l
}
9 r9 @, D" Q. |7 g9 ~
#pic img{
6 d# M F' I6 n. J. B: [$ _) e
max-width:780px;
1 a# A0 ]+ Y- ]6 @
width:expression(document.body.clientWidth > 780? "780px": "auto" );
" h+ W) i8 p, Q7 v+ W
border:1px dashed #000;
0 Z( D5 d) O1 a, Z4 O
}
& q' j2 [/ x; d. M' p% U" B, Q
-->
- }8 w7 b* k5 P9 m( c- C. P
</style>
4 e; a& N# U$ d' |' q. s
</head>
7 \2 [1 r$ _9 V) q9 Y
<body>
- A. @; z* A9 Z v* ], x
<div id="pic">
% a' [+ c# S( h4 V" a" Y
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
" e# U0 W( T W; ~
</div>
) g* b% U: y/ C1 a: ]) W' L7 b
</body>
& }8 E( j) @3 r4 \! U/ D
</html>
% I8 M0 v0 I9 O a+ p
6 B; N$ t T- Y9 H- o% O% X
百分比适应:
3 C/ f/ R( y5 e
以下是引用片段：
" g9 i+ \, j& F- Z3 F8 t+ X! [. q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 f& j0 ]5 W8 r$ [( _6 w1 K4 Y
<html xmlns="http://www.w3.org/1999/xhtml";>
) `8 `6 b% {. O) A) l5 }
<head>
9 n4 B, o8 B$ P
<meta http-equiv="Content-Type" c />
- r1 |0 @/ m# r B$ \: U( k
<title>css2.0 VS ie</title>
* _; a q! w8 z/ { B3 ~4 [
<style type="text/css">
+ J/ w" h6 o& h
<!--
% j% H. |! N1 t3 |
body {
+ G' F# {: C1 p( D- J* K
font-size: 12px;
: z& C8 x( U* N. b) h4 t
text-align: center;
; I4 Z! o+ E$ v- ]& Q( E
margin: 0px;
/ `7 h, X k" J" N. h" q
padding: 0px;
% k6 N% `) ]' O0 {+ X( i
}
1 [7 R6 q6 h. N* Q
#pic{
" a6 ?! J0 t/ q: }) V
margin:0 auto;
" x4 M" I8 I8 h9 j5 c
width:800px;
& h! d% w: Z6 k) [$ M. E2 d# h2 I* k
padding:0;
$ l% u2 b* ?4 _3 H5 e
border:1px solid #333;
* T+ N- @; p& f5 z
}
; M8 y8 a2 w8 h& A g, y: C' z5 w/ j
#pic img{
; R7 r, c) j+ u- i+ Z
max-width:780px;
: `$ L; m) ?; F% {% z# g. @0 l9 Y& d
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
8 ?2 L+ w. w9 M& V
border:1px dashed #000;
$ H& I" C; Z2 {5 ?$ e) a5 B f
}
+ ]5 x; y9 z) v% b3 _8 v
-->
3 F$ ^# x/ @% l! h3 c5 ^
</style>
+ Y D$ M7 W; C
</head>
+ \' c( S. v) @# x' P, y6 a+ }
<body>
: z6 P" [3 _* A# V) y: i; @
<div id="pic">
, d8 q5 q- @7 a. s) l* ?
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
2 l' O; r9 E0 z8 m# K' j+ k1 H
</div>
; n5 h6 } n+ E# O3 I
</body>
0 S! s( b$ c) o* K% O/ N0 H* _
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
