标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
1 w8 E& x/ F- O' R
关键在于：max-width:780px;以及下面那行。
U; g4 l# D0 k
固定像素适应:
* T$ \5 c6 J z$ S
, A4 c0 u5 _8 K/ s7 C$ ~. T
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> 以下是引用片段：
. q8 @4 ~; s3 `8 q! l2 R
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 D7 q9 m2 y# D$ R% B1 i
<html xmlns="http://www.w3.org/1999/xhtml";>
4 o& w9 S+ T- ]- [! D) s
<head>
; B# ~' G. b u8 x" o: _( j Y
<meta http-equiv="Content-Type" c />
& k* F5 k( O4 `! Q9 Z* Z# \
<title>css2.0 VS ie</title>
) w! a7 o0 G1 j; @5 F- {2 l; X
<style type="text/css">
$ q; g( a6 V' m( Z5 g, O* w, M9 F
<!--
7 x) Z. q* J* p1 O
body {
7 J0 X/ s. j' C- ~
font-size: 12px;
4 @' L# g- u- {# ]
text-align: center;
. _" z8 V( d0 j1 Y. A, Y U( N
margin: 0px;
- r! p% Q' I9 L9 ^0 Z/ w: u5 p* R
padding: 0px;
% \& a2 O& X: W: X8 ?
}
" l1 w' t6 A5 I' M' P# _( s H h* t
#pic{
6 n- s* W* Y( ?* \: p4 I9 f
margin:0 auto;
! k/ X/ N3 o6 x+ |7 H
width:800px;
, z6 O$ G E, l2 J4 @- h! q# ~
padding:0;
7 w) ~! W8 Q/ G
border:1px solid #333;
2 r9 n% w/ Z4 e' \( |) j& k
}
7 l' v X* L! S% m, |
#pic img{
9 C: w) D- F; O, X
max-width:780px;
8 P$ @$ q* T: [9 O A% s
width:expression(document.body.clientWidth > 780? "780px": "auto" );
* c# P% h/ Q% ~. ]5 s+ `
border:1px dashed #000;
' Q& d" E1 w- U+ O) A2 a1 L9 z
}
% q; A8 e( H$ M' D
-->
! u4 { z- f: R
</style>
, j3 S! H% A" ^
</head>
Y: @$ k" o6 Z, \7 o* T" E
<body>
2 b' d* Q9 y" B5 j& p- N+ s
<div id="pic">
9 d% e3 x# E$ e c& Y: E. H% A
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
2 G4 V1 D1 Y5 a" r, [2 ]4 \, R
</div>
$ f' D9 H0 E$ C b8 G5 R, e9 ~
</body>
% a. `! `5 k! V6 j9 f( H
</html>
5 D6 C1 e3 {& `
+ u2 A' p2 }; Y4 P4 a8 Q' c1 c
百分比适应:
: G, i: y0 a5 v# G, l3 u7 C) ~
以下是引用片段：
$ d5 p: E! s0 r3 G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! J% c" C/ L" X. v+ U- l
<html xmlns="http://www.w3.org/1999/xhtml";>
- u' b& T; r; E1 D2 w
<head>
* W3 n: c4 ~3 k. `
<meta http-equiv="Content-Type" c />
5 e0 e4 M" v& v5 R2 ?1 I# K8 G
<title>css2.0 VS ie</title>
* a2 O [/ C/ E4 X, N& p; q0 o/ G
<style type="text/css">
7 [! Y" ], D1 |) @; w
<!--
0 f7 q. n: K" O' V
body {
]! N. r/ G# S8 } R. g
font-size: 12px;
8 {( J9 U8 z6 A$ z& `
text-align: center;
8 \# H9 S- W2 p% s
margin: 0px;
2 W9 K4 R; B+ H4 z
padding: 0px;
) [2 G+ I6 v& i: ^# c
}
* u% i: E+ I8 l) u% G! r! Y
#pic{
+ z- x( W9 m6 y) M
margin:0 auto;
0 A: A: u8 \: C! d5 _0 i* X! T
width:800px;
- _5 O' `+ [7 y5 C. j# ]
padding:0;
* E3 @- b) g4 q6 R1 O, i
border:1px solid #333;
# Z& v6 n# A2 `& F$ F
}
7 k- ?# v( h: o" ]
#pic img{
; @% V' M8 W6 p' J
max-width:780px;
' d7 I. `5 a* k0 w# s$ q& {
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
0 p1 b6 S- o- K& N; i) {1 ^* f
border:1px dashed #000;
6 ^+ @) V7 _3 h9 B, M( C, o
}
' Q6 y2 Z; |2 o4 O5 z6 T
-->
6 e- |1 U+ N* z. F4 ]( r
</style>
! L' [3 G$ {/ C, n( u
</head>
3 N4 w5 y4 d% v! _: d" V
<body>
- \$ v4 y) h( b" ^( f
<div id="pic">
) @1 t1 ?" N9 j' A; h
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
@4 M* `1 T: j8 ^0 v2 Q+ I
</div>
x3 c$ R7 t E
</body>
$ M3 }6 F/ r! X: [ X3 Q% N4 T
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
