标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! d' P- s( c8 B. k# |
关键在于：max-width:780px;以及下面那行。
- X4 C: _9 H; @1 B
固定像素适应:
& G7 B/ [# j( I$ |, V
( a+ l. N) F# a9 `
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: ]' ^0 ]- z6 y6 F8 ^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* s% `" `* y- ^+ ~0 y; q$ u
<html xmlns="http://www.w3.org/1999/xhtml";>
6 M: E+ Y* U/ n; e
<head>
. h2 z' Z0 e9 z" _2 l1 l
<meta http-equiv="Content-Type" c />
' X I/ y1 Q9 s; ?
<title>css2.0 VS ie</title>
2 C4 _4 m U5 U0 D, R! N$ h5 v) H
<style type="text/css">
, `% C- G7 Q5 B# ~ L- h( ]0 ]
<!--
2 Y) Y8 Y O+ Y/ z" e2 q
body {
6 h- b9 T" V! w3 s# F N7 a
font-size: 12px;
6 _8 a/ S2 }4 x( }5 R; X
text-align: center;
& P) `; s G* ]- m6 r
margin: 0px;
6 t: Z9 q$ G6 ` U3 Y9 ^
padding: 0px;
& v& v7 q- e6 j9 ?( n( y
}
5 @* y2 V, d, I1 I, q1 F& H( a1 D
#pic{
! [8 S/ Y% a( r3 H: r# E# O
margin:0 auto;
[ M# G$ L. V, F6 V4 t- \* b9 `
width:800px;
* G! W1 W# K8 e0 S1 h' [) K! ]/ P# e
padding:0;
8 p0 q9 k, w8 g/ s) p' ^/ C+ w
border:1px solid #333;
' o* w$ m6 p4 s
}
( { e2 s' F. h% y2 D) a" u
#pic img{
0 F7 V8 r9 t* Y4 E- g
max-width:780px;
8 N. \/ B# E7 L2 o7 t/ i5 l
width:expression(document.body.clientWidth > 780? "780px": "auto" );
8 c- c8 t$ S# N2 J* {& w3 N* e
border:1px dashed #000;
$ B& T" k) T; T/ ?& ~
}
( J1 o$ N7 y6 t* {+ w
-->
. u4 p! ?: O6 c' d2 Y
</style>
3 j/ g4 O6 n/ x' `/ I
</head>
v! |9 e$ K+ v( V' w4 e& q
<body>
6 y! q" j" M8 S; @$ M- U) N3 x
<div id="pic">
+ S: y. S. R+ o; G( I w
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
. f c# {& e% T0 `
</div>
. ^" W. H* Z) S0 l- _( k
</body>
' L5 U8 D, ^; @$ a7 J7 ]- e8 H7 C
</html>
5 g- l# B: x+ \% d* J( p) S
% K& o4 q9 \2 R: w
百分比适应:
9 O; Y+ V+ ]6 ]0 J' c2 R
以下是引用片段：
' }) z' k+ p; b
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. I1 `( x! c2 e& F# q/ A/ F+ k
<html xmlns="http://www.w3.org/1999/xhtml";>
0 x" b! {/ Z7 h, ]2 E, L8 g
<head>
1 g4 ?3 p( t# t
<meta http-equiv="Content-Type" c />
9 w+ `0 Z& P- r: x& l
<title>css2.0 VS ie</title>
5 K9 j$ H; W2 H3 |1 W6 y b$ ]
<style type="text/css">
0 x+ k+ l# X0 U# Q$ w
<!--
% e# s' r/ x( R" a& g2 d+ h2 y
body {
+ m; _. i+ _6 l$ p* v" Q" i8 ~
font-size: 12px;
5 e3 K$ G4 E" C/ B
text-align: center;
8 `$ x+ i$ t5 x( i+ X
margin: 0px;
- a5 A" u& `/ j A
padding: 0px;
) P F( N6 |2 x) ]. j9 `, n4 X8 H
}
( N8 a5 g) L5 s
#pic{
& \' |" e& z- P# F/ A4 G. x! @
margin:0 auto;
; v. F$ e( \+ q0 [3 E+ o
width:800px;
2 i% k8 C: N5 o" _4 n r
padding:0;
2 a% D7 `/ V+ y3 M
border:1px solid #333;
3 k0 N: ~# W9 A5 g+ P
}
: G3 l" b: `) O' _/ ]) W# M+ {1 p( L# m
#pic img{
7 @! X, E n! y2 I: R1 X
max-width:780px;
% a# w# u! S1 x5 v" n4 b
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
' Y3 Y! V9 o1 n, I1 z0 h
border:1px dashed #000;
# ?9 d! I x! B5 y+ I% d3 P
}
! m0 v3 C9 S. H: Q
-->
5 f+ ]" Z, \: O" G
</style>
" _5 |7 R+ o) A0 L0 H
</head>
1 _) m- o0 S# X7 A% E* s' R1 k
<body>
, w' W" O3 p% i/ {5 U' o9 u) L
<div id="pic">
) w, H0 b! o6 h. h3 i% ^
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
4 V0 Q. p. f9 D3 U9 n
</div>
0 I+ p+ T( D" _1 T/ a: K0 P
</body>
7 [3 ~% X- t" E$ M' G
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
