Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。3 m6 P9 e% i& D+ S; _7 v
关键在于:max-width:780px;以及下面那行。, T) Q* L8 Y+ o; [$ D+ d7 s" w' f
固定像素适应:& \8 @& p3 H1 }9 I' b* Q" j6 K* G
( N& o6 s  S' L+ I# N
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>  以下是引用片段:
+ x! O8 f, m/ p: @<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> , P0 r# L! l$ H& b4 p; [
<html xmlns="http://www.w3.org/1999/xhtml";>
9 n1 S! F% [. x<head>
* p( q  g: e" d4 w  P<meta http-equiv="Content-Type" c />
! F# l' m  b; f7 q3 V2 Z<title>css2.0 VS ie</title> , \  a) T4 I% O' k: T3 P' L
<style type="text/css">
" _( a+ J1 s/ V( |/ F* V& R<!-- . d- a# A! j1 X0 d3 h3 H, \; i
body {
3 R# W/ j1 `1 l* S/ {0 q- M: G: Cfont-size: 12px;
" K0 y& m5 Y' N' E7 q5 etext-align: center; - I; X2 t( t# ~: A3 J
margin: 0px; 6 F7 \1 Y5 T$ X" |. M
padding: 0px;
- B4 H9 n5 N9 X: O: V) u, e}
# Q+ _" @, u+ |4 F: r#pic{ ' _6 m. E5 {9 p' O/ n
  margin:0 auto;
$ @- ?/ s) u  K3 ]  width:800px;
1 d$ P3 d1 [  w/ i6 J0 A- J  w3 t  padding:0; 5 |/ u$ J6 ~% |8 i  c- n6 `
  border:1px solid #333;
9 t2 Z$ W* t6 W) I  j% U  }
( o) O3 x6 m3 c( {/ L" c  Z#pic img{
) e' ]2 L5 t1 H9 s6 |    max-width:780px; 2 G( ?# l8 m8 H: I! R  Q
width:expression(document.body.clientWidth > 780? "780px": "auto" ); " V: c# \2 @: `/ E5 `+ b
border:1px dashed #000; % j/ U+ w' O, Q
} 8 A1 A" P; m3 N9 A0 {5 l0 M
-->
6 A. D. H0 r9 @, a3 o3 B0 k</style> 4 V$ q  E4 @( A) j! `" x
</head>
: |0 }2 r; [& X! G<body>
5 M1 H# n" o6 K4 G& C- G/ e( d# d<div id="pic">
" h. \) a1 k- w/ `7 [<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
* n/ y, a, U8 D</div>
+ j' i" f3 O: S3 v6 N8 S</body>
$ V- t" }6 E# z+ h% v( @' y</html>
) N) C8 }' P" k0 j$ h
5 W0 v6 j# M! Z百分比适应:3 w1 J3 N) N% a& e
以下是引用片段:2 f  Z6 x8 s- e* H1 E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 ^8 `0 q2 N! B* C# Q$ l6 X! I9 I<html xmlns="http://www.w3.org/1999/xhtml";>
) }4 L9 w' `8 a2 u<head> . b; C8 @& Y3 ~  u; \) H2 V
<meta http-equiv="Content-Type" c />
+ n; {) |6 Y& D! n0 q6 |2 D9 y<title>css2.0 VS ie</title>
4 Q$ |3 `% C, ?5 ?<style type="text/css"> 9 i* p8 J& @# y$ T6 [" j& N5 k
<!--
$ m" v5 }7 x' i0 Y" tbody { 8 F/ |0 p8 y% z: ?
font-size: 12px;
; Z6 i& ?3 ?. Z0 dtext-align: center;
; F( w1 X6 C, Z  h6 Cmargin: 0px;
. D" C( j7 i& X1 f/ V! Dpadding: 0px; ; \  n# h' ?4 u% {/ X: S
} - x$ g4 [% J; `# W+ o" A! d6 }
#pic{
  `9 e8 j3 J  T7 C  margin:0 auto;
: ]5 v. W! P. j3 p! P1 s- P  width:800px; $ _" u* B  ?: F6 G% O; o  Z
  padding:0;
5 k& c2 ?6 |$ _# `2 X$ T1 Q  border:1px solid #333; + u" c) z: M4 E& @/ q* M3 v1 E, q9 C
  } : f0 ~2 H+ a, P+ U2 ?
#pic img{
" d& R- G  M9 k7 \% k: q0 z7 c    max-width:780px; 6 K4 `5 b$ G  @
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 S' o. w+ b" q/ V1 Iborder:1px dashed #000;
2 C. v6 ~4 k0 U. o} 3 a5 `: B* {, A# l* w
-->
. w. ?; ^2 F; @: H$ X# r. G</style>
4 _$ E+ f! \( A+ m/ `</head>
4 A7 ^* L1 V! S<body>
9 _* n# G+ l6 T% m) F3 C<div id="pic">
: M; K; A" g$ U6 c' ^* u<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ' l; `; a, J; U4 l0 L
</div>
/ J$ o6 Y! K* g% D3 w</body> 1 ]4 `* h" ~" C9 a. W0 z; r
</html>




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