标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 N j# B4 P: Y6 P
关键在于：max-width:780px;以及下面那行。
9 G$ D! O' {" O$ f0 d5 k# [( a3 Y
固定像素适应:
2 ]5 C) U# _- W3 F, [: C& Q3 E
8 X4 |0 O) o1 B" C
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> 以下是引用片段：
7 `# U% z% D8 g0 b
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 ~0 R& `0 o" i/ C/ ?1 E$ k) ?5 U; C
<html xmlns="http://www.w3.org/1999/xhtml";>
$ k, x- ~! z3 g) j) ^' T- v# i# E* L. X
<head>
" S! t/ [; i+ Q* M
<meta http-equiv="Content-Type" c />
9 A1 Y+ H' ^6 |, t+ ~
<title>css2.0 VS ie</title>
( M/ w+ V I) c3 E3 q) d" @/ d
<style type="text/css">
, z1 G" q7 }" H7 Q% A, r; N* M
<!--
}# s. Y: S A' Q8 w* @$ X" b9 {8 c
body {
1 x! n: h7 V3 ?/ I
font-size: 12px;
3 l" i* @& i( q. O1 d0 X9 e
text-align: center;
3 d3 y) p2 O" t A7 L: Q
margin: 0px;
- t3 B% p2 ^" q7 h" P& ]) w
padding: 0px;
; o1 q+ @# B9 Q3 Y0 Y* K% V- z
}
1 y: z9 j: {, K6 H2 T; I9 }
#pic{
! @; S# }6 p! W$ o' Y* c
margin:0 auto;
! }' L! @' B: N- z( n0 }' w
width:800px;
: r5 o- {3 U& {/ [& m7 i/ x
padding:0;
/ ]! j2 l+ C6 U
border:1px solid #333;
: I% s9 l" @! N' S1 P% A
}
! r0 ]7 v: N$ P+ h4 m5 b# O
#pic img{
1 ?+ F# L2 ^: d: u) E; r
max-width:780px;
; B- B( g1 |1 D1 d8 O+ p
width:expression(document.body.clientWidth > 780? "780px": "auto" );
1 X4 ~' C g) p+ U6 n p5 h; G
border:1px dashed #000;
+ o; Q: N$ X% Q- w6 j
}
* g _ Z9 H' V, n# O/ O( I1 v0 T2 P
-->
" i8 o X+ v2 y. D
</style>
2 Y1 ~3 v8 e, P" w ^9 F! D$ u
</head>
5 e& r0 m7 x, R8 o6 n
<body>
5 f. Y3 E/ U: ^
<div id="pic">
5 j! \6 p8 L# u8 M" B( \, N
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
( s- {: a2 X( K% b, ^9 [
</div>
; K. D3 }: H! M6 z9 M( |. K
</body>
0 W' q" S d1 L- a9 ?6 {+ R
</html>
) I+ Y& C2 V; M; ~
, S7 Y5 f" ^, N' V" I7 {7 `- g
百分比适应:
! M) _' b/ c9 _4 t% k$ G2 y: U( k
以下是引用片段：
- `- K D2 w0 A+ j0 L4 j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 C& Z3 Q5 L' O
<html xmlns="http://www.w3.org/1999/xhtml";>
9 `0 |2 q( }, Q- A# j+ G1 y
<head>
8 X3 F0 l, e- S; D4 p% P1 K
<meta http-equiv="Content-Type" c />
2 G8 E1 q1 Z& {' K' ?: ^+ t
<title>css2.0 VS ie</title>
+ b* u! U3 U5 \$ _
<style type="text/css">
1 P" |' A% `" |- N, u( j
<!--
/ X5 x6 V/ R5 p/ X/ H/ E
body {
. A( S( X4 S, g* z8 C+ Q* e% P
font-size: 12px;
6 t8 r7 x+ v# w! N4 `3 }
text-align: center;
/ j$ ]; C) ?. L; H
margin: 0px;
2 S- ]4 e8 t5 O- |
padding: 0px;
; P* P/ u: A. W4 [5 E7 @" x
}
# [! M) A- I2 N2 {
#pic{
+ e G! H+ y+ E* T$ I0 I, X. u
margin:0 auto;
0 V: G" s: `! W9 S4 W, ]* P; [
width:800px;
5 ^8 ~- n" J( k3 P% L* z' v
padding:0;
, v1 S9 I% q! f. C0 i$ n
border:1px solid #333;
Z* e, @, U4 w! v3 }
}
! W' }. o& i) s% Y) @ d
#pic img{
9 m! g8 G6 C: x. Q6 v6 E
max-width:780px;
+ P8 i$ D- X) @ k+ Q5 g4 v) R8 G( n
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
d2 h# z& `( x% H6 y# L
border:1px dashed #000;
, l% r$ p- f- ^$ e! j( w! h8 h4 K
}
8 g; D# [, p" o- X1 E1 o
-->
T# d; U9 g J" {3 M
</style>
! V$ e, {& P( Y: ?0 V
</head>
8 L7 Y) k! Z/ \
<body>
/ o- K' o8 |0 V# g1 w
<div id="pic">
) ?' R- ]% A6 S! n# h5 R
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
9 F, Z( N' F0 U' T( N
</div>
4 O2 n6 x4 X* r$ g* F7 k6 [2 F
</body>
, n3 _ D5 q! E% x" s. `, `
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
