标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
1 A0 H! C/ |. ]+ l& O( `
关键在于：max-width:780px;以及下面那行。
: j; L/ S _9 _) `3 U
固定像素适应:
" F# R( N; }1 H% u" X1 x8 k
* l. Q l/ k0 u5 u$ ~
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> 以下是引用片段：
" O8 d- c/ e/ l: `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& J7 w" R0 P2 R4 U* @4 m+ O1 V
<html xmlns="http://www.w3.org/1999/xhtml";>
# z4 t8 T8 o3 R/ E# O. J" y
<head>
2 N- J5 k& g) A& ]& m* Y3 b% ^
<meta http-equiv="Content-Type" c />
4 D1 m/ g$ ^1 D; r# I
<title>css2.0 VS ie</title>
8 y; a2 ]2 ~# V0 G* S/ I9 N! k
<style type="text/css">
( l5 {$ G/ e' s' Z1 {
<!--
& E, |- b8 g* x! d! F0 C( V7 l
body {
. t F6 N, O6 a5 Y) @
font-size: 12px;
0 b Z _/ K. l9 N, H
text-align: center;
3 w! \ a5 Y( V
margin: 0px;
6 W0 r. C# V# ~+ r! h' A: j
padding: 0px;
- a9 d6 {8 E- n/ b
}
$ O, U" C2 G- r* N; t
#pic{
0 b7 T' J/ D, N f2 j4 z* [" u7 ?4 d
margin:0 auto;
+ ~4 t! U3 O! w) q8 [
width:800px;
% h! x+ a" n" a/ x( T/ B, Z
padding:0;
" n$ U/ N' k4 @! X' Y% T5 C w
border:1px solid #333;
8 i% u6 ^) Y( P
}
/ O# p# b( F, A; [) Q5 y6 c8 n
#pic img{
/ p: S9 K9 | f/ X
max-width:780px;
9 B* N) z. z) Y/ i+ p
width:expression(document.body.clientWidth > 780? "780px": "auto" );
" Y7 Y1 o& S# P: E* S' l
border:1px dashed #000;
0 i8 ~; V0 F0 t1 Y/ g2 F
}
; F; I5 w& t- O
-->
, [6 s/ N$ S" {1 f/ z9 W! W
</style>
) x0 y- y% u7 C. w4 {+ R5 \
</head>
0 [6 S# O+ {" N+ J+ l2 Z' u
<body>
% r9 s3 W/ H$ a
<div id="pic">
" o6 t% D) I( ?' [! G% c
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
) I* v. I* r# _/ I2 V) z; l
</div>
0 S1 j& a. }- L" }# H9 y7 R
</body>
$ P4 N1 r/ B! v/ J1 H$ P
</html>
' ]" ^: ~- ^! [# |2 X) W+ C
$ C. y1 m7 v v+ ?$ j
百分比适应:
6 Z0 C2 G* d, F( q* l$ X) `
以下是引用片段：
1 @( u. ?- D' _( N$ e, {- x0 v" a4 }2 [
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 Y$ M$ B, j0 h1 J
<html xmlns="http://www.w3.org/1999/xhtml";>
! D! c- {4 }$ w8 E1 L
<head>
7 f0 C! }: e9 Y) ?& ^6 p! C2 j
<meta http-equiv="Content-Type" c />
$ _) e; _/ r% L* o! |- C
<title>css2.0 VS ie</title>
6 E& V9 V' V$ ?+ y* g! R, O$ R
<style type="text/css">
' h4 g* B8 l% A5 ~8 N
<!--
8 s j8 x( Y9 @/ U* q0 d, k7 Z
body {
5 N, F) K- u/ Y: ]0 L& w# w* x
font-size: 12px;
& X- k$ j' z; w4 Q" |( ]
text-align: center;
4 z. G# R/ w3 l& I
margin: 0px;
/ T% D" R5 r# z' T: c
padding: 0px;
3 k, j! X/ u# E* w' k7 S9 c
}
$ f. t! C& P9 o# _) z! J
#pic{
7 ^( G3 H6 u6 Q1 B: {; N! C0 c
margin:0 auto;
+ X& T, P- {' C. _+ P u
width:800px;
) u/ U% T( O2 M/ N4 D A( `' v( e
padding:0;
v; w- `8 w2 B6 s& }5 ~# P
border:1px solid #333;
$ b( { F5 X* v
}
1 j! `" ]3 Q- |- V/ C) z3 G' |
#pic img{
, ?2 G6 X8 s/ i3 ?
max-width:780px;
& q5 X) i% L7 y$ _7 M" T
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, w3 ~& G: O" F2 g" M6 w
border:1px dashed #000;
8 Q) L8 ~, q; d' ~
}
" o0 b3 r# r+ s% \; q- e
-->
! s7 g+ j/ ] L# b% j3 |1 r6 }3 W
</style>
/ W! @8 u2 M F7 R
</head>
0 d& C q$ d& g( M1 i7 x8 D# u
<body>
( w6 y& n/ f9 H! T/ _& `/ {; A* g) B. F
<div id="pic">
5 q' T$ j. T( ~/ W1 L7 N
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
# s+ Q6 o# U4 g) C
</div>
7 r! P7 a+ J6 B! y
</body>
7 y; Z, C1 k- _% g) B
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
