标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
0 l0 [& q Z% m: _$ s3 s
关键在于：max-width:780px;以及下面那行。
% O: y4 F7 I# F$ F5 X1 O
固定像素适应:
6 X% |; T% k% y4 U x9 s2 t( o$ U
1 a1 P3 Q1 s1 F! r# J
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> 以下是引用片段：
+ Q5 c, N; ~4 R: x* O
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: C' Y3 i( ^' A$ g0 q" [
<html xmlns="http://www.w3.org/1999/xhtml";>
: d/ \: Y9 L6 m0 a7 e) K
<head>
$ d+ _: R1 q8 g9 ], v; A
<meta http-equiv="Content-Type" c />
2 L7 }! ]3 Z2 j8 ]- ?
<title>css2.0 VS ie</title>
: m" M5 w4 G% ]. y. l& w( N5 T2 H/ W
<style type="text/css">
( p" w. [- S3 A" E
<!--
+ Q. q8 X( e& ]9 a9 Z0 ?3 {
body {
8 t9 Q; X, z' q0 o7 b5 X
font-size: 12px;
2 ^7 ]- k& c* [0 e
text-align: center;
: ~" q; b9 Z5 A: n; ?4 ?
margin: 0px;
1 c9 z9 N8 d/ X" O, |7 I0 S
padding: 0px;
2 e3 T. f( |2 y% I
}
0 N Q" o* i* I4 d
#pic{
7 d, M! R: [5 F0 W9 [
margin:0 auto;
. ]9 }7 j' J, [' n
width:800px;
1 B( G2 \ y9 q( Q# Q' n$ @
padding:0;
- b( Y$ V; H- x! C; g
border:1px solid #333;
[- U* c$ K$ q4 k9 q
}
+ J0 I6 E; Q1 }: c4 w4 u3 o
#pic img{
7 E( }$ s) \% t- S; q( V7 c) C0 ?
max-width:780px;
1 X. f6 K* f: w6 U4 ]& T4 ~
width:expression(document.body.clientWidth > 780? "780px": "auto" );
! z& O D4 g2 g0 L8 h
border:1px dashed #000;
6 t# B7 Y \) Z
}
5 p$ J( m3 r% I5 Z$ m$ c' R
-->
4 Y+ y: j v+ v1 {: [0 Z8 P' |
</style>
6 g: R' C1 C: }2 l) P: E$ J
</head>
: w7 R8 O( U: K; `) ]- }6 s; ?
<body>
" k+ Y2 K' j7 T% h' `) [
<div id="pic">
$ y. e# j$ q+ H7 q Z
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
; i0 [( a8 u$ M' }6 b7 D* a0 N* E. _
</div>
5 X% I( J9 n( E, g' O( R
</body>
$ N8 o5 C& n1 F
</html>
* c3 z- T) T, K8 O3 B6 m
1 @" {+ Y+ z! C$ \
百分比适应:
4 L3 T: q J% J. Y" B; J3 w& ~
以下是引用片段：
! b, W# x( F7 m( E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( t& ?3 P6 n* N. f6 H
<html xmlns="http://www.w3.org/1999/xhtml";>
- X w* o% N; t/ T! X; B6 G
<head>
( a7 P/ ]; R; Y" b; B6 E( y% G6 s
<meta http-equiv="Content-Type" c />
3 H d! S0 e3 L) t) [, Z
<title>css2.0 VS ie</title>
( }2 |( |. n# O( x( Z) W3 v4 j/ ^6 g
<style type="text/css">
3 M, H! \2 ]* n! H( L
<!--
; U" |9 B: n+ q. {( F
body {
9 G, X4 H0 h9 y) w4 s4 k
font-size: 12px;
" M0 }7 G! s! E4 w6 i& r
text-align: center;
5 g+ |% B. ^* G' K7 a
margin: 0px;
, _8 a& g* x7 j9 `% k- P R
padding: 0px;
% }1 G0 N: W, l
}
# \( W- d5 t! K, h8 V' J7 x
#pic{
/ F8 o; S8 [6 @ z' s& M. u$ R
margin:0 auto;
! c! d6 r9 ?0 p d. v% G5 j4 n/ ~
width:800px;
9 X7 n7 R; ~& V' `/ ?+ {" J
padding:0;
" @) G& d4 b3 \, p+ I
border:1px solid #333;
* W N9 U1 ]7 o( n* c+ _" o; B
}
0 }$ l3 r; ~% I
#pic img{
g/ @4 y9 V( x1 B% B) @
max-width:780px;
. F1 b; k" h# b ?. ~$ I
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. J; i1 a1 P" ^1 t9 a
border:1px dashed #000;
3 e; a% f+ s% X" _
}
; w2 M" y2 z; V# V' P
-->
( N* o! C5 [* d4 h
</style>
6 x% O5 { }) H* y& Z
</head>
' y/ j: `) B+ A; m$ Z9 I6 O
<body>
& H# h2 J# o! `+ w0 W+ `
<div id="pic">
. a0 ` b& a3 v7 E
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
. L+ r9 P# t' ]. w3 G. H
</div>
& @* o6 U: @* t2 ?
</body>
; w% T! n/ o4 i3 }/ I6 s
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
