标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
9 i- [! y" B' |! c- w6 p% m
关键在于：max-width:780px;以及下面那行。
6 Z1 S* ?0 X# r. D8 l
固定像素适应:
$ x9 I- o0 c, Y- R
u4 }$ {9 P1 v k5 v
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> 以下是引用片段：
0 f: ?. r1 ^: v+ ^5 K& O1 W: l! e [
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 G( b, S/ ?/ A" B
<html xmlns="http://www.w3.org/1999/xhtml";>
7 M/ S1 |5 V8 P. m8 W
<head>
$ R7 v3 R6 a2 s9 T
<meta http-equiv="Content-Type" c />
& M0 o4 x& M4 {: P* L) Z4 V( x
<title>css2.0 VS ie</title>
/ R9 Q l5 @/ y( C; Q. T4 G5 T
<style type="text/css">
& Q, n" ?- j$ a( H, Q# n/ I
<!--
. x$ _. `/ h+ A/ U# f y
body {
# z! |; E' V& f% A8 H' F) G
font-size: 12px;
+ T. c4 p9 @+ [1 l# s+ q
text-align: center;
' q7 U& _; F/ U; ]- ^
margin: 0px;
7 y5 ^# Q7 [8 l5 U
padding: 0px;
1 a! |) o; T* ~
}
) Z, F2 Z. J: d3 P; T
#pic{
+ k& D( n) M$ W6 P5 x- I4 J7 j0 |
margin:0 auto;
2 T& D7 e6 C, y. [; ]/ t
width:800px;
5 X* j/ U4 X3 Q7 e6 e, S7 _4 h- M
padding:0;
6 J ]% |6 C: D# }
border:1px solid #333;
* i& T. d( ~8 [
}
0 N5 Z5 F( W1 W; D8 y; X
#pic img{
. W* _. Y3 U9 @" Q; Y
max-width:780px;
# D! Y0 `0 J5 [" J* X% F% N
width:expression(document.body.clientWidth > 780? "780px": "auto" );
# O2 a' G+ N5 D+ w) ]+ C9 Y
border:1px dashed #000;
3 C* `( X% h- h/ k1 z
}
$ J N ~1 c8 ~, D; @- ?6 y% r2 W3 o
-->
8 _* u+ U7 z# x# l
</style>
1 k2 F2 N" K( ~- a- j9 e. b+ M
</head>
# [$ \# M+ y0 D. H
<body>
* [( B: b+ M. m
<div id="pic">
8 J( N2 i. F( ?2 A
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
8 b; X7 n1 } o9 ]. Y/ x9 _' r; ]
</div>
/ h9 ~# m" Y) `! @ Z# m
</body>
* l6 a) U x# v! N- _; V6 y4 L
</html>
$ E3 o$ x: x s) F& ?6 Y* o
3 F) h5 c, {8 u o9 r) N
百分比适应:
h* _2 y9 L, X H
以下是引用片段：
8 y1 e" W/ a! l* m4 K" L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ \" r6 C {2 a
<html xmlns="http://www.w3.org/1999/xhtml";>
1 ]. C4 k2 a/ y* i5 v1 ^
<head>
7 g# b! I. g4 j* ~
<meta http-equiv="Content-Type" c />
2 {9 m2 O" I6 O" `
<title>css2.0 VS ie</title>
, u& {& ?( D* O ]0 Q3 \
<style type="text/css">
& w# C0 \8 ^7 G7 \1 t4 m
<!--
5 j5 N6 l) F. X" J. M
body {
: G7 Y' _* s' O. n, a
font-size: 12px;
4 e- v6 h$ H* a d% U
text-align: center;
) Z4 t1 @2 Z4 q& H. ~" T$ A
margin: 0px;
6 ?- P# x( h* }& p) v. z
padding: 0px;
: L& d6 w. M% w. t3 H8 W
}
1 R7 Q) t" l5 s6 B+ F
#pic{
: }- ?, |: ]. z7 [$ W
margin:0 auto;
5 A8 O# {+ f0 S3 C( {
width:800px;
' }1 y& E$ f9 l) _" D- Y' \
padding:0;
! l' b* H8 W0 p1 S; X p6 J
border:1px solid #333;
" q& E- C; U( ?$ Y$ v
}
. `+ I' y+ L$ g: i% e1 T
#pic img{
( }3 R; _9 ?. ~
max-width:780px;
- u1 n! V) L4 V% ^- z; {
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
# v% y" I7 a' ~; p4 Z" G) M* E6 N: ^
border:1px dashed #000;
1 i" H2 Q- D- [+ o% w4 W
}
* u( _$ w( I7 b8 B8 |/ C
-->
7 t5 Y3 C6 k5 m. U
</style>
$ z+ a* \1 J0 i$ X& ?0 b `
</head>
8 P9 }0 a; m; N7 y1 s
<body>
1 o d1 \! N2 s# P7 C( ]5 L$ X
<div id="pic">
9 P. p% A7 f6 h1 [! j0 R9 P0 _
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
9 E: v* X- H- T. X+ L
</div>
1 S a+ G! Y+ y% n9 f
</body>
1 Q. W" Y& e9 o5 I2 u# v
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
