标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
- L2 [7 G* |7 r7 f# T1 D
关键在于：max-width:780px;以及下面那行。
" g; r( _2 k. B# d7 T) V* q3 D& N" ^$ J
固定像素适应:
* I) j4 P7 C7 P$ j; T6 }: W
8 c. q. z5 D* [* ~& f% U3 L
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> 以下是引用片段：
$ \; p/ M2 C9 R& L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 D& A, F- u' W% K
<html xmlns="http://www.w3.org/1999/xhtml";>
E7 g5 \, X) Y: M
<head>
% a1 Q( K& v4 J2 b/ A# z
<meta http-equiv="Content-Type" c />
+ \! i4 G1 `$ s n4 N D
<title>css2.0 VS ie</title>
# G" D% a9 x! x5 C# N; A \- O
<style type="text/css">
# q' i% B1 ~; u }6 Y
<!--
& G' s5 `; S; j1 ^; t+ b4 ~: O
body {
) i1 H; u" L/ R/ v
font-size: 12px;
# m; Y9 I4 n9 i
text-align: center;
" h( c t& `2 q; X2 ?
margin: 0px;
8 j* t8 `- F8 D7 L* h
padding: 0px;
, M0 g; {9 }9 z6 J& P
}
/ o3 y' c3 y; G0 o2 `6 B' F
#pic{
6 Q! E5 e1 r9 x5 B- D# R
margin:0 auto;
0 y; D. W% L- Y
width:800px;
3 H! n' C3 u) e3 Z
padding:0;
+ g' ?+ @5 b/ O- x2 ~
border:1px solid #333;
1 j7 Z, b- W+ n1 E% z
}
0 P% ]! Z# N. Z# C% t9 V4 G" \
#pic img{
) X9 B4 h3 Q5 r0 [" X$ d1 W
max-width:780px;
6 ^% n6 ~) C# L; o+ G( N8 r
width:expression(document.body.clientWidth > 780? "780px": "auto" );
2 \ ?' _9 R% R: X+ W
border:1px dashed #000;
! J. J0 a- @" h4 L3 P1 y
}
0 c" ]0 x$ i; l5 S; e
-->
3 a- z- ?* S8 v* c: h- B
</style>
4 o9 }4 X1 r% t' x, A! `
</head>
: w9 t P! p- ?+ ^
<body>
) {& W) x( K9 [+ X) U7 B
<div id="pic">
% |$ P, q4 r$ n/ j# w* R( T- F3 \
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
0 i4 \' d1 |/ G: d0 E _6 O
</div>
5 o) }, o, O M2 n+ ^( u* I. ]6 T2 \
</body>
8 r# T5 W4 O4 n+ W! A6 E
</html>
$ q1 |. `' K& \7 e" ]7 b* I
& U' p7 u8 ]9 w7 z* h+ C
百分比适应:
$ K5 R! e# t- ]$ j% X p
以下是引用片段：
2 T3 ~1 h# Y6 Z0 s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" w/ U1 P' t! S" \& V0 \
<html xmlns="http://www.w3.org/1999/xhtml";>
$ w* h$ z5 x5 Y7 Z
<head>
- E: D- S* v% B: J
<meta http-equiv="Content-Type" c />
. U$ ~2 O* n, M
<title>css2.0 VS ie</title>
1 t( m, ^% h+ c) T
<style type="text/css">
8 r& T" i" D2 l$ {3 J' F
<!--
- u$ ^& \% b5 Q+ j+ q' D7 w
body {
/ ?+ c, V. y! b! j5 X% ]* F
font-size: 12px;
0 }) J. i \5 b
text-align: center;
/ d- M5 ]4 R3 J* s- k$ }
margin: 0px;
% X# G5 @/ B1 R4 v2 T
padding: 0px;
6 k3 ~$ Z7 J! v, P
}
& d2 c' i, a8 w, T/ [
#pic{
5 X" o; ?- E- y; x9 h: K$ j; ?1 ~1 S
margin:0 auto;
0 J% h5 A4 @+ c- Q7 A. v
width:800px;
/ u! u9 H- w; f% F1 J7 ]' l- b
padding:0;
, t8 Z- f5 Z d/ U; D" ]# E4 Q
border:1px solid #333;
8 N l- J8 l6 U: i
}
' Y4 `% I( D; D4 N# g- i- k
#pic img{
5 R+ [, m; }% I9 h9 T8 _1 P
max-width:780px;
3 U; N. l; e) _) n
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
) U5 }8 s+ u1 ]8 a* j
border:1px dashed #000;
+ w# W4 z( G. e* F7 A2 }
}
8 W, M' y! |" [" x3 `
-->
5 {$ n1 B3 z0 S( M* r
</style>
+ X- F* Q E2 b$ Q" t
</head>
6 J/ K1 e4 x( h0 J2 f# g) [1 @
<body>
3 |( H. n! ~6 M( h5 `
<div id="pic">
. W4 i% D- |7 S- K- ?
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
4 H+ J4 X9 d2 I# _) c
</div>
9 x& u! j8 L B: d
</body>
$ q; Z. b# |! J3 v/ M4 D$ h. p
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
