标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: {3 [6 m' t6 M# y: n
关键在于：max-width:780px;以及下面那行。
& V3 o! E l, U! ]5 e
固定像素适应:
" |' u3 v- r. z7 b! @
$ L+ y" W0 L% x8 ~
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> 以下是引用片段：
# r$ \0 D- p6 n2 U
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" ]9 q: B: F. Q- _
<html xmlns="http://www.w3.org/1999/xhtml";>
+ `$ D, D3 S+ `$ N; e
<head>
+ Q M* [# E* f% c+ N T! t: a
<meta http-equiv="Content-Type" c />
! s* J( ^ N" i6 q$ h* L' m7 f
<title>css2.0 VS ie</title>
6 @# i: C* e, f: f T
<style type="text/css">
5 U% s+ X" g. n3 `" ] W% H0 U
<!--
7 u% W- }- n3 d
body {
' }0 C8 Q; i5 C
font-size: 12px;
; m3 s4 j7 K: R Z/ J& ~1 A
text-align: center;
7 s6 i9 T* [- G* }6 L* |
margin: 0px;
. h" P$ G4 F+ X2 m1 o. Z' i+ m
padding: 0px;
' J& ?- `& c a, i. C$ c8 Y$ {* d
}
0 c2 h/ Y5 x! H7 O. X/ i) Q2 I3 P5 n
#pic{
' n9 u ~. \7 I& O# y
margin:0 auto;
8 u0 P& X0 R% q, f" @( p
width:800px;
4 f$ L2 U4 R% y* @: p! m$ l
padding:0;
8 ]5 w! I. @& m
border:1px solid #333;
$ q' y- ~/ K: R: j/ T
}
! s. U5 e6 c+ f2 Y) D- E
#pic img{
. w& e2 {8 z! J: d2 a8 r: n
max-width:780px;
' f$ K' A2 r/ x. @- `
width:expression(document.body.clientWidth > 780? "780px": "auto" );
/ q9 P+ E/ D3 ^
border:1px dashed #000;
$ i9 p. q" o1 K. j8 T4 M3 t
}
1 z# j: P0 T0 H& L
-->
( }4 P5 \: S6 Q3 G! h+ R
</style>
9 t! ]' _" i v5 A$ o# o, T5 b P
</head>
4 D& P5 {! ~4 R& L" f9 k0 V0 L
<body>
& R; O! h% Y3 Y1 S i4 Q1 _ Z# p2 y3 |+ k
<div id="pic">
) p5 n3 X4 k* o8 X- ?6 {; `
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
' U4 T. {" ~/ L- U
</div>
- D$ M* m/ z7 \ ~# w, i1 M
</body>
. l: c+ P! r+ R8 M! t3 D
</html>
6 Z# F" \' s' i5 [/ {2 \4 N
$ l7 c* K; E. m& F% R8 e6 Q
百分比适应:
( _4 s9 I) v8 M8 ^, n6 g6 b
以下是引用片段：
" y! \! Z% Z) u# K; N4 O5 }$ {
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; K6 y( w- [5 F! p
<html xmlns="http://www.w3.org/1999/xhtml";>
9 M8 J r, V/ c. ^
<head>
( {: z2 A) W. c
<meta http-equiv="Content-Type" c />
6 G! f) p |" y5 ^
<title>css2.0 VS ie</title>
4 U) L' t; B, O) o
<style type="text/css">
% a( c9 ~8 Z. I y, S
<!--
; l0 a6 y" @! u7 O
body {
. E+ o, b- o5 `# q+ k
font-size: 12px;
' v: B. y) i F4 h1 g. }9 h
text-align: center;
* W2 V! i# b* E
margin: 0px;
4 D& S0 J6 V/ S
padding: 0px;
/ M1 ?, [* ?2 y$ F: m
}
* G& ^( U- r& Z/ m: Y
#pic{
' r$ `$ E" T4 k8 a, Y
margin:0 auto;
6 b `# e( ^5 M; x9 |
width:800px;
" c) e$ ^; p+ J; B% [
padding:0;
2 Z4 |) X/ B2 X: a7 y0 ~" @5 l
border:1px solid #333;
/ L; J; T b& e1 Y4 p
}
* @+ Y) `: `6 k
#pic img{
7 d* ?6 W! n2 U. X+ k
max-width:780px;
* Q# h' F5 |$ o- U# P; r* c6 o6 r
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. ~7 g- H& O! j) p) f, d- W: g
border:1px dashed #000;
- A( w4 _* X$ \. e- O2 e
}
& O3 V5 G. D; L3 S& V
-->
7 @7 C$ ]; J3 q! g
</style>
' D; E9 u) V/ n/ ?) F; }3 \, G
</head>
/ o Y' P- R5 c; J$ ]) U: G P( ~
<body>
$ s, [4 e8 G8 [3 w- f1 }3 i- l
<div id="pic">
! z8 @7 k! B* x
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
0 n3 e' L, L8 s" P" T. h9 w
</div>
' M/ G1 H+ l8 _$ Y
</body>
( D' W/ o8 Q; [- o; e6 S+ E
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
