标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 q: o4 U9 `) R# D, D6 t
关键在于：max-width:780px;以及下面那行。
+ A* S7 X, ^' p# o
固定像素适应:
' Q/ \/ p3 t$ N
; }3 R. |# D. _5 v' Y2 |
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> 以下是引用片段：
; r3 M( _) L/ B- @
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ X# C2 ?, X, q* s. Y$ ~9 t. |
<html xmlns="http://www.w3.org/1999/xhtml";>
4 O+ d7 o0 _3 w
<head>
' R& r, ^8 M. r
<meta http-equiv="Content-Type" c />
8 \9 k6 q# u. G
<title>css2.0 VS ie</title>
: u* o$ l+ B( l7 V0 D5 u5 B$ g
<style type="text/css">
$ r4 _0 c: c& u' l
<!--
, @$ _+ R! { Q0 x. I( y7 a4 Q' ~
body {
/ c% I. F$ \3 `4 O
font-size: 12px;
2 H2 x9 I1 [8 h( u R
text-align: center;
+ S7 k* S6 @& q( Z
margin: 0px;
' [+ n1 S2 [% n; j
padding: 0px;
6 w8 e. s) R6 }
}
& b& p# `2 {3 F- R
#pic{
$ l# E) u: z. o$ A. u2 L
margin:0 auto;
. J: M- s2 K( @7 Z
width:800px;
4 N* D. V# y V) D
padding:0;
. c1 y! P- |2 z
border:1px solid #333;
4 ^: f9 @3 p: Y9 {8 ^
}
4 ~9 @* Y* c/ k7 @+ u7 e/ j# m) P
#pic img{
7 x9 x: P* W" t. ]
max-width:780px;
; q6 \/ m! E7 ^) C
width:expression(document.body.clientWidth > 780? "780px": "auto" );
+ j( z- b% H% J9 d; q, q
border:1px dashed #000;
* F3 O, O) F& P! [
}
& Z9 l6 l5 g1 Y- @! b
-->
* i8 a. J! x2 J" Z
</style>
, W+ f) A) J+ d% l- Q
</head>
. [6 `# {% Q$ d5 x& ?5 {
<body>
, h3 \- W& d5 p f8 g, B& G! }
<div id="pic">
# I& O$ l8 d; ~0 \; H
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
* a) m( w: | ?0 }- w1 q
</div>
5 R M1 J! n7 H. \4 e- X; `8 b
</body>
6 o/ w! X; w A* a% @ K6 R
</html>
1 {; a, H9 E1 I. h4 W% n7 \0 v
+ ^! _# v6 L- `4 ~* ]* Y
百分比适应:
U5 W& s" `; v- x5 s% @
以下是引用片段：
1 o) y+ L% m& X' y# L& A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, J) e. v+ D. j1 Y
<html xmlns="http://www.w3.org/1999/xhtml";>
n# q! o( ^8 u- a/ d( J
<head>
3 I4 f A, I* ?! K% [' ]! B
<meta http-equiv="Content-Type" c />
( x3 k6 Z8 O! F V% N! r6 a' |
<title>css2.0 VS ie</title>
- f6 R5 A% W$ s+ M& A1 O
<style type="text/css">
B, x% U$ q0 ]' G* b. ^7 u e0 [( H: u1 _
<!--
7 y. D, D3 O/ p' S' U: F
body {
5 t+ H; D7 J2 T& X& f% e
font-size: 12px;
; K% K# N- {0 x
text-align: center;
3 Y) z# ^, s( d+ l
margin: 0px;
9 J: r2 O9 r& N) B" ^1 T
padding: 0px;
( r9 Y( z. I7 @0 Z% s/ D5 a o+ g
}
; |2 {" V* v3 i K* W( j
#pic{
- t" l& ^8 U4 Q) U3 M5 k( U: Y4 l
margin:0 auto;
3 o- s- G: _7 M6 l8 B: ]7 s
width:800px;
3 O8 l; l! b, j0 I2 i5 i
padding:0;
, {+ d; E) t ~/ R& [
border:1px solid #333;
: K9 S% e6 v) k8 I
}
6 |. \8 p' O- V9 O Q- X
#pic img{
5 Z& v$ U( S% _% @0 r, ]& B
max-width:780px;
& k! u8 s, G5 D
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
7 N/ \, H8 s6 o$ b( I
border:1px dashed #000;
) K3 k. X# ^, A9 N* q% n- ^5 |
}
* d+ N8 W0 W) n9 Z+ H. c- b
-->
. k4 t w% t6 R. b5 Z
</style>
. E/ I" m7 a; y; Y; ~- |8 C L
</head>
7 D- Y/ ^! j; q3 c* u) d. J
<body>
. v- _7 S2 s) M# d7 S
<div id="pic">
. z" ~) b& H5 r
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
8 X% ]1 Y' V) C8 C6 v- ^3 n
</div>
1 q. N5 J0 X2 X6 x4 j+ f
</body>
4 Y3 E+ Z; Y" }, _ f: |: x
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
