Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
; l8 S+ c8 l: ~9 \  V关键在于:max-width:780px;以及下面那行。
9 h5 @( S" h- L  |' C. C  O1 ]固定像素适应:
. h  U! a* o; c3 x" c" n
/ e- t! o5 s# h4 Y8 P$ A( Udotted; 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>  以下是引用片段:
$ c2 o* |6 P! P7 A. ^6 B: g<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ I2 D, c6 r8 S6 E0 D2 }4 |<html xmlns="http://www.w3.org/1999/xhtml";>
3 r- P# k! h& k3 c" ^<head>
6 |. v4 R1 i2 H5 d! i9 N! u<meta http-equiv="Content-Type" c />
* ^3 k! X# x4 o) L4 I<title>css2.0 VS ie</title> - w6 Q2 @8 `2 Z1 P% ~' T4 w
<style type="text/css">
" U' \, M8 j" }# j! o! k; f/ @4 q<!-- 3 @$ L! @( R  i% B9 F
body { 9 G  H; Y8 m# c( ~. F0 H* W. E
font-size: 12px; 9 V# Q( \. e  p/ |8 m, l
text-align: center; 1 y1 E7 u9 ?1 n! H. M9 h
margin: 0px; 1 T* L* x" u9 Z1 b
padding: 0px; $ i! u7 q! E1 y
} : I- t" w6 ^, b# G  ?+ O! m
#pic{ % U# `5 ]* I5 K1 c0 x" Q$ Y
  margin:0 auto;
% x% Q2 P9 H/ G/ m5 W0 I  width:800px; ) ?+ q5 o( F0 ~5 F% W: ^
  padding:0; " r. g* h+ ~! G2 q# k
  border:1px solid #333;
+ {: V% T# r  F) R, b9 A5 K: }( M  } , B) ?1 M* f1 G' `" F, H/ @. p5 y
#pic img{ + n$ n9 W7 n! z! O" D
    max-width:780px;   _' B* S% S0 W0 j' K9 Y8 ~+ e+ H
width:expression(document.body.clientWidth > 780? "780px": "auto" );   }5 u+ ~" g: w0 k$ J. V3 ?
border:1px dashed #000; 1 ^1 X  P7 `. N  h- A$ E
}
. k6 m% P4 k; E& E2 o- v# b0 n1 f--> 5 ]0 z: o0 |2 V9 p
</style> ! z* Z$ q- R- K2 _1 ?0 J. V4 `. T, Y
</head> 5 [4 I  @4 F% S4 R
<body> % w( D% s# U9 |. G* \2 O
<div id="pic">
: e/ b% X* P* h$ [( J, Y" p% V<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
# Q& J! C, L- P9 h1 ~</div>
( u7 p3 [" k/ ]% E) T$ U</body> " U: i+ h9 l3 x  P/ h9 H
</html> % ?* s' F9 |1 e

' x* P  c  ~. k" ~' W" v百分比适应:
9 G  z) a  m" Z. ]9 }以下是引用片段:8 v5 X5 j3 F, C4 x% h2 m; m0 R
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> & b, t  x3 l9 L2 Z
<html xmlns="http://www.w3.org/1999/xhtml";> 3 c8 b' T$ r7 |: D$ _5 \
<head> ! L7 ~2 s, J* E/ }) o2 N% l( p
<meta http-equiv="Content-Type" c />
1 b& B) k. _( K& _! D4 B! A, J<title>css2.0 VS ie</title> " |( ^8 u0 [7 D* D0 K+ g
<style type="text/css"> 7 `6 j: q+ u7 I4 T
<!--
, j$ {3 Q. l" nbody {
! d" }# Z. V/ e# O/ D; @font-size: 12px; 4 p8 h& M2 L3 G. g/ j7 s3 h) e. c
text-align: center; $ D6 O+ v( R* R* V2 j
margin: 0px; % Y- o6 C- `" J1 O
padding: 0px;
9 d) x! B3 g- F7 S$ w}
' F1 a# Q# K1 G8 |$ r0 L2 F#pic{ ' E4 a" Y0 }$ k$ [( G7 b
  margin:0 auto;
3 }' U3 @) \: Z9 B, @  width:800px; 8 K7 \6 C/ g" t5 k! I! ?
  padding:0; 5 U( x6 v7 L9 }0 W( S
  border:1px solid #333;
" |+ r6 g. R, ^& Y  }
' D5 Y$ q; m1 a) T# Q/ C#pic img{ ( w: |2 C( c+ e2 v4 B
    max-width:780px;
3 i1 d- G$ O6 |. E- zwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ) x: y* e) k% Y5 N- H; c, Q
border:1px dashed #000;
' n/ }, T  }* l0 _} 0 M( v' ?: z; y0 q/ q8 P# l
-->
0 }9 ~  n8 L2 u8 ~& W& n7 K</style>
2 i6 U; q0 c/ `: b</head>
& C- e! o9 B1 v  [7 [# k$ i<body> ( j3 l' ^& j! U& [7 Z8 q! z
<div id="pic"> 5 Q, s' }" C9 _4 @
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
" p, p9 o, W  c) e9 V</div>
8 \) O9 M1 y9 I- P- P/ e% R</body> 2 B  `. Z  _4 N( g) Y* o, @
</html>




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