标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
; M! q* l3 p8 C/ d# J
关键在于：max-width:780px;以及下面那行。
! u P( g, U1 J9 V) P
固定像素适应:
& ~4 T- [( E( p3 H$ r3 t
6 N5 @* g z( ^9 R0 E. ^
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> 以下是引用片段：
# T/ ~* p* b2 D$ b! j7 T
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ o8 I- T( e% k0 t3 W
<html xmlns="http://www.w3.org/1999/xhtml";>
: H7 J7 f' l7 ^! K6 f
<head>
6 x9 G$ c, Z. e H8 N
<meta http-equiv="Content-Type" c />
2 V) M) u2 g- u4 e
<title>css2.0 VS ie</title>
4 t% D) g) Q0 u
<style type="text/css">
9 [+ X2 @, V: M" i# C
<!--
6 X6 @2 T! D. U9 q
body {
E2 ?! ~: W' `, v( V) s4 Z8 k
font-size: 12px;
+ c$ t- {: Z8 d5 X8 b. c E k
text-align: center;
f* M; s' x! f/ p6 }0 c
margin: 0px;
`3 J8 n: x; o; z7 F2 h
padding: 0px;
6 T7 `& U0 `8 Z- ^ a9 ?) v
}
( H: G3 Q, {' @3 x
#pic{
1 d) k) [# v+ E4 S* ]) {3 j0 h
margin:0 auto;
2 C8 J! U; w% ~) X1 j0 A
width:800px;
! z. o0 }/ _# w+ V
padding:0;
# x5 Y7 l2 F% }6 F* m& ~
border:1px solid #333;
5 @6 Z) _' g# M: F) K; [
}
2 r+ p6 Y8 j- x
#pic img{
8 t% R5 {0 l5 P1 d
max-width:780px;
! _8 v9 R% j/ v0 v: k, O6 _
width:expression(document.body.clientWidth > 780? "780px": "auto" );
/ t" Q8 q0 e1 _( B: p& X$ P
border:1px dashed #000;
1 m6 t2 Z+ Q( ^. @* I5 ^
}
$ O: H/ J$ d/ d/ D- \
-->
$ H# M6 s6 o! n! `, k7 V
</style>
& ~, t, q! D7 B3 y/ K
</head>
& g7 P1 @0 a' z. C3 w0 |
<body>
: t" p# R+ g8 b6 f! F0 a% d, }7 z
<div id="pic">
* h: h3 }% L5 n- L) q4 \
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
& c% P* b; ~! u/ I# D* U
</div>
! d$ U5 }! R8 @) W
</body>
4 l, N- Q2 N+ ^7 H! c
</html>
9 N6 }: D6 k$ a' K
3 z' j: s. U) `
百分比适应:
! R' |' q( ?0 ~/ v. w( e4 r
以下是引用片段：
% j& ^2 A1 ?8 g! o7 E! L$ l
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
s0 q5 [& X: I# K# A8 g1 O% ]
<html xmlns="http://www.w3.org/1999/xhtml";>
8 j9 F0 n) a. k8 A
<head>
. k5 V; Y1 Z# p- c# W g5 P* n. `
<meta http-equiv="Content-Type" c />
$ b# ~7 _+ _4 r# y) {: i- w' S8 n
<title>css2.0 VS ie</title>
7 E/ L V9 r; V& C6 C. [/ P- e
<style type="text/css">
. S1 _ r- ~& `/ t
<!--
5 D+ N% I; _1 d5 Z; a2 x: k% y
body {
" o$ W- R4 `$ ?
font-size: 12px;
" V5 _& K W* B1 w, p' I2 b- J9 f
text-align: center;
$ z) _9 H5 { q2 O- H3 Z1 k; I
margin: 0px;
: ^2 }- [3 U B: w7 ~/ G
padding: 0px;
- `( G: g; ]0 N* |. T7 b: \
}
* p W: s' \; s- y% p0 s) g( W b
#pic{
, L' b' G5 y4 q5 s l3 y6 }6 l
margin:0 auto;
6 `( s" M) ~( J! L5 g5 j8 `- o% d
width:800px;
4 b& @6 w( T. C/ S* R+ x
padding:0;
6 `1 y! [ B9 K( j7 c# D$ U8 k( [# Y
border:1px solid #333;
0 l G$ c: h3 w. I, ?! `
}
4 @8 Y3 ~( }% `8 G! K
#pic img{
K0 W( n- R1 `! j, t( j. m
max-width:780px;
5 |, c$ z* c% a+ L7 }- b9 F# j) P1 ~
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
/ }) A$ A. E: I: H5 e
border:1px dashed #000;
" L3 D% f4 v n6 ~0 F+ z: R* A# g% k. d
}
! d) D0 C& {$ m" r
-->
F6 x7 R, Z# s6 G. I' P
</style>
8 n2 }$ u5 _5 j8 s% |5 C5 H
</head>
& D! p y0 A2 M) q: n# V/ {6 s
<body>
4 a4 }* M" l6 s/ H' I
<div id="pic">
( @/ G8 a& r M8 M( t1 W0 P
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
' T+ L+ M+ ?0 C6 @* ?
</div>
& f5 Q8 W& e$ ~ v G5 Y& }
</body>
7 z5 e5 g" W6 D! a
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
