标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
; D0 y% J v1 r
关键在于：max-width:780px;以及下面那行。
+ n; Z& K! B, N" v% L7 x7 z
固定像素适应:
6 i4 a9 \& T1 s- \! r: X4 P
3 R5 z7 T- g* `( Y6 O% b
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> 以下是引用片段：
4 k# U/ N* a2 T# v
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 _! C+ X8 R" M
<html xmlns="http://www.w3.org/1999/xhtml";>
* c' Q1 u/ z1 Z6 h) e
<head>
/ J; N' `/ c# J7 J
<meta http-equiv="Content-Type" c />
% Z' [3 q2 Z# g& D& Q
<title>css2.0 VS ie</title>
3 m5 H+ {' P, t3 K: X" L
<style type="text/css">
* v2 l, h6 D* l% b1 \; N
<!--
8 z V \3 d" p! t
body {
6 v" C' Z' R: k# [
font-size: 12px;
6 \8 H7 Q# g9 T/ Z7 Y& b
text-align: center;
/ B& Y/ M- s- w8 ~5 d9 w
margin: 0px;
9 m( {" V) v4 m# o1 I' _
padding: 0px;
4 ~% h/ t" y2 C
}
3 G* n9 s' P- ]# f
#pic{
3 Q8 ^7 c) F* F0 n3 `
margin:0 auto;
, z8 {/ b5 N$ d1 |- g( [ Q
width:800px;
' W$ u* R) v' ]; k' |
padding:0;
# B, e3 }1 Y3 J" g {+ P1 r/ v
border:1px solid #333;
! ^6 \* L' U6 l4 d$ T* Z
}
1 x' p; @8 O' x6 o$ S8 ?4 W
#pic img{
) f' l7 A; o! c3 q; X
max-width:780px;
& L8 \6 N/ c" k0 J& S# A; j* Q0 {
width:expression(document.body.clientWidth > 780? "780px": "auto" );
~0 E7 p+ G8 S# X, H: R
border:1px dashed #000;
; l# d: ?; `5 Q9 Y @2 [0 B
}
& k7 s% R n. L" ]! P# U
-->
( d f( U" ~& o: k, J4 H
</style>
L' g! V* c. r4 ^
</head>
6 V. `5 j" R T) [) \. Q) S
<body>
( Q+ q4 N, o+ F8 @8 V
<div id="pic">
8 j, P/ E" |- B* v4 K
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
0 U) `) f% S* t8 W8 X
</div>
- ?; e; ]2 L. q
</body>
$ P) ]& P5 k5 l- g* D& \
</html>
5 v% t3 L! s+ u: w. A. g. O
4 c5 b* } q- M8 x
百分比适应:
3 s: h$ [3 @$ `. d; O) o! M
以下是引用片段：
% t/ M; I; s% D) s/ e
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 q8 l5 M2 U1 ?6 ]; n: D. h
<html xmlns="http://www.w3.org/1999/xhtml";>
; {% I' s4 o4 a" c( n+ d1 [$ r" D
<head>
. F+ J" y5 M* [1 B4 W
<meta http-equiv="Content-Type" c />
& C2 i" e+ Y! g& F
<title>css2.0 VS ie</title>
# C+ z ?! _3 Y8 U0 A: o
<style type="text/css">
' Z$ W! v5 _: |0 i5 N
<!--
y& N) ?7 p% [; W, i- |" X
body {
3 Z% t3 U t9 b8 C& v) \$ U
font-size: 12px;
6 N& r1 U% i l) d8 `' K' l
text-align: center;
$ k7 g& A& l0 \# ?( X; N$ \
margin: 0px;
3 v# g' L) B- @% ^7 t4 u' O
padding: 0px;
4 l |) a( t! X% `- W! x
}
, }# F0 |: z" n8 T! U; P
#pic{
/ C3 m9 G& X, O: J& [- H! e. m
margin:0 auto;
. [6 T1 f; W: h
width:800px;
; U k7 L6 Q5 F% W7 n2 {
padding:0;
' f; n+ F0 X1 O5 z
border:1px solid #333;
" B( d6 \% K9 v6 ~7 n; ]
}
}6 E" e. R2 w' m! b" @" L; y7 M. o, }
#pic img{
& [+ W) C! p1 h
max-width:780px;
7 U# J: `* ^! C6 V
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
# s# L U. v3 m
border:1px dashed #000;
' p: v6 F( A2 | R j2 i
}
7 H+ D0 a L2 R
-->
1 q4 g. {0 W- U# l. v0 ?' v
</style>
2 v2 ~+ t% a' w! R6 b+ a9 k% O
</head>
) S9 l6 T0 ]! S [
<body>
1 s% F2 V. g8 |1 U
<div id="pic">
$ r& [8 F0 x5 E% _5 ^3 `
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
! s# t+ ~- ^4 Q0 m+ L9 {. e8 x$ v
</div>
3 z- Z5 e8 p# A% g$ F$ _, I; e
</body>
0 {4 |* P2 }$ @" r" \- z
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
