标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
" e g) A5 V& H( {- N7 B
关键在于：max-width:780px;以及下面那行。
1 N2 h) H: u* T, u4 r
固定像素适应:
( T$ J7 L/ n9 [! I# G2 k \
, e8 y% ~9 J; n3 |; g
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> 以下是引用片段：
: |& L$ ?" @; B: T8 c6 v
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 w1 M' U7 O) J0 L2 ^, u4 u' r
<html xmlns="http://www.w3.org/1999/xhtml";>
8 C$ n q8 V: p* I; n) c' u7 J
<head>
2 q3 S [* n1 e, I3 h
<meta http-equiv="Content-Type" c />
* C9 D0 I' f3 r( B6 T- x7 F; l0 ~
<title>css2.0 VS ie</title>
3 r h1 l- N. x
<style type="text/css">
- B( _0 T- z( I+ z" x* t
<!--
* q7 u8 {3 O2 e; J. y6 h
body {
) G7 N5 E" ^. Q. K8 h+ H: I& g1 u
font-size: 12px;
- c! D$ h- ?( k+ y8 `1 `/ }& H8 t
text-align: center;
+ G K' m! `& i3 K0 v0 U) ?
margin: 0px;
. u/ Q. z2 p; L' g" |* H$ q
padding: 0px;
- g' H6 m. e% i0 W: D9 B- h) L& ~
}
' z7 o# \2 n9 K
#pic{
; |1 h3 ^0 r2 H' j u- t1 N, U: R
margin:0 auto;
5 z$ g0 m/ o) J$ S7 i- A! P
width:800px;
5 h) f0 I) r% J; X
padding:0;
7 H' M$ \$ C* e# s
border:1px solid #333;
& \2 ]5 X& V) @+ C
}
( U$ }* r0 t W) |
#pic img{
6 {2 u8 e9 Z; ~
max-width:780px;
8 |. k4 `. m9 q8 b& X* @
width:expression(document.body.clientWidth > 780? "780px": "auto" );
, ^3 `. \+ T9 q, ^% l5 m
border:1px dashed #000;
1 n8 |+ W j4 f: U+ j' E
}
: E+ U! j8 B0 u/ |0 g4 `
-->
, k( V+ i: h6 b$ O7 g
</style>
' J% n. g5 e, |; X8 y# v/ z
</head>
) u& [1 l) Z8 M; Q
<body>
( m4 A. `" m6 b+ z0 c
<div id="pic">
4 z- j r7 _7 f$ \) Y& |
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
7 Y4 M- |. }1 z V
</div>
- E& R" r3 o2 O5 F8 a( a* ?
</body>
2 Z U$ h% w7 g% `8 O2 W
</html>
- Q( t/ p6 V& `# V
8 v( t% p Z* Q' T+ w
百分比适应:
z2 x9 T2 E8 T+ Q& B& Y
以下是引用片段：
5 d. m9 ~) W3 d7 J! y: [
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* A8 P0 \* j2 ~% G# i7 e6 V# }
<html xmlns="http://www.w3.org/1999/xhtml";>
' [6 x* F. s$ z/ f. u
<head>
. d) k( R) n. u; e s
<meta http-equiv="Content-Type" c />
% k/ C! X+ q7 C
<title>css2.0 VS ie</title>
# A& T+ }3 ~( b5 `+ \3 n. h
<style type="text/css">
- Q2 A) q$ B0 @4 y& D" h" _5 i
<!--
1 X: [0 x X0 V8 D4 ^9 N
body {
; O9 {2 f5 l% v
font-size: 12px;
X* I8 m( X0 u6 x0 e
text-align: center;
! C. W5 U4 F1 l9 H- r
margin: 0px;
0 [0 M& Z0 l1 V4 J0 a8 `2 }# ^
padding: 0px;
6 i7 I7 n" A8 c7 ~5 ]
}
$ o+ ]' d# d( @" ]" @
#pic{
* j7 b# ?$ m5 [' g. K& u
margin:0 auto;
" ?( H( |0 l- c1 m4 U2 ^
width:800px;
( z- v/ a7 R" ~( J( p& p) w
padding:0;
8 Q" v8 _9 Q# @/ \( R/ u4 g* X
border:1px solid #333;
V8 E" t8 n4 I% m! e
}
$ {* i! |2 q7 g
#pic img{
5 [; `) P3 @8 e1 \$ f% u" _
max-width:780px;
% w X! @6 f6 @
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
+ |' G" A+ E* E* T5 F+ B! n
border:1px dashed #000;
: ^3 R: L. A; `. C0 w/ n0 x
}
% {" w3 K- g* }2 V0 X
-->
* J* ~& \* x) r' a$ A$ h( M1 _6 {
</style>
9 P- k. w' R% Y9 \9 U8 S; I
</head>
" a7 o) e- l! C# y
<body>
. S+ ]# u9 k+ t5 V2 B: w, \' [' X
<div id="pic">
1 D5 }8 T: ]2 k8 s" |& o
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
& J7 D$ x, p7 L
</div>
% p5 j R! \2 Q! i' T$ M
</body>
: v) K5 B1 ^7 m4 t/ r
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
