Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
/ T5 r. C% [" o. D/ J' n关键在于:max-width:780px;以及下面那行。$ D8 P+ z0 n& u
固定像素适应:2 W; i7 Q: }4 }. Z4 j4 ?( v8 q9 s

. e9 a% E* Y+ I! X/ l% }/ n1 G/ ]* Ydotted; 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>  以下是引用片段:& [/ D" H. `- f# {* P7 x* V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . w" B0 D7 ^3 x
<html xmlns="http://www.w3.org/1999/xhtml";> 2 X$ S- m' x! N# d
<head> . g) ?  [; T+ V# E
<meta http-equiv="Content-Type" c /> " ~7 R8 I  k9 f& P2 g/ q. D
<title>css2.0 VS ie</title>
( G7 W/ K( T/ [2 v, Q<style type="text/css"> $ c( {, `: M0 H: E7 _
<!--
9 z: T+ y" o6 U9 J4 a2 R! abody {
# E5 T) i6 u+ D1 q7 e3 \1 Zfont-size: 12px;
' D7 \8 y4 V3 i* l: |text-align: center;
, M( ^4 g# H5 E% nmargin: 0px;
# s  V, G7 M4 z; O" ?padding: 0px;
' E2 K' g1 N7 V$ Z" N; r) V} " C8 c" @* J4 F' Y4 i# o
#pic{
, ]+ R% X, W0 D( [  margin:0 auto;   O  G/ q# t3 L* c3 z2 R' ~
  width:800px;
* a$ ]9 |, Y- c! n  padding:0;
7 f4 u3 n- N9 I; c/ k  border:1px solid #333;
$ G8 F7 ~& G* B% ]( C  }
4 B7 s" S4 M% K  p( M2 Z#pic img{
" o% x5 C0 ^0 ^4 F( H$ ~* ?    max-width:780px;
0 t5 V5 s% K" v3 h! A3 Wwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
1 {7 Y* B' Y$ w) yborder:1px dashed #000;
- P6 X. |, U, y6 e; T} ! R* }+ ]! s8 Z+ Q0 c2 c
--> * j; V3 x& q: k$ M  j( m5 K
</style> ( K1 y8 g8 `+ S+ s: h
</head>
$ c9 ?8 m8 K, Q6 ^' g<body>
" T# x- {5 d3 H  d9 G+ A1 }) j<div id="pic"> ' @5 z: J, y$ v4 d2 Z
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> $ W/ {% J% k7 G% W% Z
</div> / X" h, s3 q) U
</body> , I, y2 U( l) C0 y$ A9 n7 N! ?
</html> + k! g* f& A" ]+ c' f* D! Y

7 I$ r; K/ k( ]- |3 ^" _( V/ w百分比适应:
/ Y0 Q. Z+ a+ w6 D. [以下是引用片段:" a" L/ b3 Q& d- s8 G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 3 y3 u9 C- D- l% {9 W
<html xmlns="http://www.w3.org/1999/xhtml";> 6 f$ I9 p+ _$ H" K' w
<head>
- u/ B# r1 [+ n4 N<meta http-equiv="Content-Type" c /> % {; ~8 w6 Z0 P- p2 d4 C
<title>css2.0 VS ie</title>
5 f2 ~* S& q4 F4 E# D+ ~<style type="text/css">
' M  g. @4 L. Q) U! b/ p9 w<!-- % t1 a* y' d/ u6 v$ b7 P
body { 9 }. T* A  H4 {3 K' G
font-size: 12px;
  ^0 y+ k3 Y) H) Q4 q& g+ u' K7 d, atext-align: center; 3 j, z9 U* U; Z, s8 P* b
margin: 0px;
6 A* O4 X4 K; Xpadding: 0px;
, u2 T) z5 ~' e5 W) L. f}
7 A$ H; H6 X& h9 f7 ^#pic{ 8 d) l; m9 N4 e6 ^* s  p
  margin:0 auto;
0 L& Y, V/ e( ~) z0 j6 _  width:800px; * q$ y- t: d: r7 F: s( F
  padding:0;
4 D4 R7 G- q- G, f: p& G# h- P  border:1px solid #333;
- b6 I  P/ ?# b( X: N  } ' a; O0 V# Z( \4 j9 p
#pic img{
; p. {- `- P  C    max-width:780px; 4 v! _% d9 K4 _. U
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); , @6 R$ W$ N7 e( y5 A2 h, `
border:1px dashed #000;
  b: Q- g6 E0 ?3 i}
0 I& o3 l+ m- r6 G-->
2 X4 \7 R6 ?; c</style> 2 N$ e5 p$ T2 w- V% {9 `4 S% }1 ^
</head> / X! A9 e+ y0 ?( U" X* i
<body> ) `7 Q  \' ]/ u
<div id="pic"> - I. G- ?% a2 O  T% Q  `) x7 ?
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
9 ^( Q* Y; g1 \</div>
8 \4 O+ L' g; k' N& Z* ]/ {2 T1 w8 N+ V. R</body> ) ~" f9 G3 h* p) }
</html>




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