标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
5 E3 d9 k4 y, E$ N( B
关键在于：max-width:780px;以及下面那行。
3 v) T# C0 Z0 y
固定像素适应:
6 @- _+ Q- [' I
7 m' g/ ]: T1 g9 n7 f! U! s9 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> 以下是引用片段：
8 Z* r5 M& p2 k
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 z7 G& Q1 b) ` f
<html xmlns="http://www.w3.org/1999/xhtml";>
$ e& Z9 F( Q: B9 e& K0 n* }3 S" _8 i
<head>
4 e' U' m8 b$ f1 j4 x4 Y* j
<meta http-equiv="Content-Type" c />
: ?. g. w3 ^+ O8 ~- H6 y
<title>css2.0 VS ie</title>
7 Z0 h+ M7 E/ G+ n
<style type="text/css">
$ ~+ Z/ i1 b( C7 S' c' I5 C) `# t
<!--
7 I' v7 J. X" e% c. v0 }1 v
body {
# P+ [3 s3 F* S2 F$ U
font-size: 12px;
D. I% Y" F; T; `7 S3 e
text-align: center;
8 j4 n. ?1 j; _1 F# T
margin: 0px;
; L) T; c8 K# o# i
padding: 0px;
4 v. A& _2 k9 j
}
7 [7 n1 I) s' i7 y3 G$ o* Y
#pic{
3 P5 U- }0 M7 T, x6 b! [: y. `
margin:0 auto;
) k7 m0 l8 w5 R4 V5 Y
width:800px;
" n1 D# g" @3 {# g8 S6 N
padding:0;
. M% U8 y- F+ `# z6 p6 B
border:1px solid #333;
6 `2 @# ?, P: r
}
4 K# I+ q) C4 A4 Y/ |
#pic img{
8 F- m" J3 U1 O3 h. _
max-width:780px;
' \3 g( d$ [& ?& `& y
width:expression(document.body.clientWidth > 780? "780px": "auto" );
: a( G: L% e g' W# m) | d) _) w: B/ c
border:1px dashed #000;
7 f- X/ f- j6 o+ }" V
}
3 {" q; i j! `9 a3 ^
-->
5 n: `- ^( u/ C" _7 A
</style>
; D" z7 U4 c* O/ m
</head>
! \- r6 Q: v$ [# r9 N! \
<body>
, Q4 i9 G; P- `0 x
<div id="pic">
3 x. @- c& r% _/ G$ B$ _
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
( f, a- @+ p m" M& o; H2 [- i, B
</div>
/ @* M! J- F- d' c
</body>
2 E( Q0 ]. J: b; R9 b h
</html>
! Y# P& Y1 i, ^; m: Z @
+ i" t( X3 X! d/ Z" a4 c6 m8 z
百分比适应:
* E5 t# Q1 H5 d! Q; Q, `
以下是引用片段：
6 j0 ?; X |6 y7 V, U+ A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
Y: x& \' k- ]( T3 Y9 K
<html xmlns="http://www.w3.org/1999/xhtml";>
6 }/ A' e7 m: W5 r0 l: u$ k
<head>
' L" \# L( D) o0 v. R4 H5 F6 }
<meta http-equiv="Content-Type" c />
0 D G0 O3 M0 J) g5 J: C
<title>css2.0 VS ie</title>
. t6 r+ H6 p6 T% v* [6 s& } c; h
<style type="text/css">
v/ s( h- `- i& D& |( _/ p7 o3 q7 ?& B
<!--
8 ]2 L/ C8 ^" Y9 `9 Y7 y/ m; o
body {
9 B& C# \) s9 a
font-size: 12px;
) }; _. E1 G+ x' [4 M( N
text-align: center;
' n2 O7 ~; ]( {3 }$ W4 Q$ N
margin: 0px;
, l/ O& H) P- U( B9 s! [- S
padding: 0px;
& G0 }) p: e) R, _# z- v: w
}
- q7 r: J6 r! q+ ~) r" K1 [8 ~! s1 c
#pic{
3 [8 v+ I4 n, |5 V# C0 |
margin:0 auto;
' B5 K( x9 H' n# _6 h0 s+ `6 [6 i( z
width:800px;
6 B7 V! p; ^1 Q' D
padding:0;
( g# }- h" _3 i$ E, u, N0 v& v! K
border:1px solid #333;
1 I5 @+ u) ?4 i+ m5 b
}
# @& ]8 T @6 Z* t& S. N
#pic img{
/ \% Y5 L; }! b
max-width:780px;
5 W5 }8 C5 t5 e* L9 r& F
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
5 A4 n) X4 N* e1 O
border:1px dashed #000;
: O! ]+ Q# I* k. }5 B
}
: n5 p- z; s) }$ }. ~4 M4 Q7 m
-->
1 L: o1 u/ q5 g
</style>
$ q5 d3 @1 B0 A5 N1 ~9 w
</head>
5 Q7 {2 ]. b3 `- }, T7 Q
<body>
0 B2 N1 I: T; u% B0 z: i
<div id="pic">
- z' J- `! ^0 X3 ^6 t
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
5 z# M: N$ t$ ]% h2 W* S% c2 N6 V2 U
</div>
0 G U$ z: E+ Y8 z3 H
</body>
; ?; g, o$ l6 v
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
