Board logo

标题: 在DIV下图片自适应的解决方法 [打印本页]

作者: admin    时间: 2007-12-8 14:55     标题: 在DIV下图片自适应的解决方法

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。7 p  v2 |& I0 A0 g4 V, t
关键在于:max-width:780px;以及下面那行。
6 C- v# d# B. r1 C& x固定像素适应:
5 I0 D! ~5 L5 {. s
! A1 i8 E1 K2 u6 C8 C, h$ \9 O. kdotted; 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>  以下是引用片段:
- }6 A2 F, c7 x/ _5 i1 o& `  H<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 v0 V) g; j0 ]$ S
<html xmlns="http://www.w3.org/1999/xhtml";>
. |& M" c+ b0 ~<head>
2 z! B% E5 L7 t<meta http-equiv="Content-Type" c /> # U9 u9 g7 U0 ?! l
<title>css2.0 VS ie</title>
2 ~9 F( T0 {  K9 Z* J  M<style type="text/css">   C2 R' k) m6 v" E6 q
<!--
! l/ f9 x1 m* N' Bbody {
  {) m4 b0 B6 c5 I* f% e! Yfont-size: 12px; ! h9 w2 K" c6 F+ \) \0 j# v. K
text-align: center; + a/ |# t5 y- l1 ~6 d0 A
margin: 0px; % S: a( t. }9 _9 ^
padding: 0px; 4 F% b- [8 N* x; ?/ u  p5 _
} $ N( U( l5 X/ H+ c
#pic{
) @3 j4 k5 o7 t5 k0 U! B" a  margin:0 auto;
$ z1 |+ {$ {; B+ @  width:800px;
: w- r0 {0 ]# I) E0 s  padding:0; 4 m5 i) X5 ?# B3 e" r% p$ I: R
  border:1px solid #333; / ~# E( {+ T% u, T
  } 7 {7 D: t# L: @3 b* p; u* Q
#pic img{
1 x+ ?2 s1 c! N    max-width:780px;
' G2 }7 P2 E4 b7 W: p- t$ Wwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); ; [  T6 f0 P! V; B3 K3 F& {
border:1px dashed #000;
9 }" @3 Q* S& j6 m0 v}
* j5 I  c; |. Z3 {--> 0 i: [& ]# u: @1 h9 Z) o' p( N
</style> ! ?: D* o5 z, B8 ?/ h
</head>
/ Y# ~$ R/ @- e& u3 ^( D9 l, a<body>
7 _9 v, z7 L# {* l/ k4 ^<div id="pic">
; C; ]' ^9 T/ ~<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> % \. L3 }! p, q" b2 H; i: y
</div> " [" O9 B" G* h, ?8 |1 b2 \% T
</body>
) f0 H* y2 t, ?! }, I</html>
3 ~" s8 Z& x- r, ?" h  t
4 H- y0 V& O) j/ t百分比适应:
6 d. s$ U  r7 Q6 {* }+ Q" {/ }以下是引用片段:" v/ ^: i- u& T$ Q3 t
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% c# k# B. `; ^+ D<html xmlns="http://www.w3.org/1999/xhtml";>
7 K7 N" @% K) [; l<head>
4 }( ^3 k# O5 _% ~0 W<meta http-equiv="Content-Type" c /> 3 O& T! Y  j6 }0 d
<title>css2.0 VS ie</title>
2 w% ?" S4 l& v4 i; a0 q, C<style type="text/css">
- h5 M0 ]/ Y6 Y# k5 p' D: Y. f<!-- 4 t3 E, ^: M* I, K7 [* i& C1 V
body {
0 M: b" q) j) m8 u  T: C( pfont-size: 12px;
# ^$ d6 J9 f5 [% q$ d  Stext-align: center;
. A# U* }# N3 @8 U* w" w) Bmargin: 0px; ' m5 H( j  l- M- T0 ~  y8 |
padding: 0px;
1 g# O+ o: `2 b( v9 k( s3 z} 0 a4 J7 ]- p6 J% x% g
#pic{ 2 H5 ~* e! D# O
  margin:0 auto; ( N4 e" i& S; G1 |
  width:800px;
) j& b7 v! F7 t, O# p8 B+ i  padding:0;
6 V5 o6 N' Q7 N7 q" ~  border:1px solid #333; : W$ N, ]: t( s7 t6 _6 c
  }
' Q, {/ `) q+ Z#pic img{
; |: P0 v1 B/ I+ S) \9 V    max-width:780px;
5 t5 d; n) N  ewidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 9 u) Y$ u, s/ z6 N8 n9 u# S+ ~* Z
border:1px dashed #000; ' M& M4 ?2 D+ U, |
}
4 P* i7 ]( Y. i$ e/ i" `8 F--> 1 o& T/ o$ s- }. t. K
</style> & G( `, E  `9 m/ q$ n1 D$ P
</head> 7 u$ [4 X; u. a& U0 f; R
<body>
0 s+ [8 N8 U) q( p! b<div id="pic"> # V% k( `" p$ R
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
: T, @. \+ \8 R, ~  a# D</div> & Y. K3 m' V* G2 `) S2 j
</body> 0 q, W6 \0 l$ m
</html>




欢迎光临 捌玖网络工作室 (http://89w.org/) Powered by Discuz! 7.2