Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。( i0 Z4 u0 N% S- }+ u
关键在于:max-width:780px;以及下面那行。6 B6 U5 z% S. S+ N9 i3 ^' j
固定像素适应:
/ w! ~) _$ I/ q% ?4 z' v- m
- F" Y; I) z8 X  p7 odotted; 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 B- o5 B8 l1 u7 y8 m' \# R' P<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 h$ \; v7 R: H( F. f<html xmlns="http://www.w3.org/1999/xhtml";>
0 m2 x  |: U, V: o<head> & i9 f& p5 \$ b: z) c
<meta http-equiv="Content-Type" c />
9 m# d; _6 g6 s3 ^<title>css2.0 VS ie</title> . ~3 k# r6 D  K# d; H4 i. S  {
<style type="text/css"> 3 b! Y" G8 u4 s: w# ^1 F) R& d
<!-- ! C- v# }& f3 W" K; w1 ?
body { 3 |4 ~6 o2 z; Z) H2 D: w
font-size: 12px; & d4 M" H2 ]/ n
text-align: center;
! `4 |9 o: Z5 \( j& w. c2 ]: Nmargin: 0px;
! H, \0 }3 b( N: g/ }5 spadding: 0px; 1 X- B& K& G' c7 O2 t4 C; ]
}
. W. h2 }( _0 ]; E" [+ {#pic{
; s& X* p8 B. ]% u* y8 Z  margin:0 auto;
; a0 m( l+ V/ T  width:800px; 7 Q' h- ]5 t) j) D7 S4 t: M
  padding:0; 9 L# t! H: L: u# D0 [
  border:1px solid #333;
7 [0 _/ Q+ s' L8 p+ G* f  }
, O9 t* N0 F1 a7 K2 b7 p& D) o#pic img{
: z+ K) }& n4 f8 y    max-width:780px; ! o& A7 c' l  r) v4 |
width:expression(document.body.clientWidth > 780? "780px": "auto" ); + b9 S9 c, M- b
border:1px dashed #000; ; J7 O  M. E7 O' W/ v
} : w% w2 v  i$ P0 O* `1 h
-->   r5 M3 A. C8 @( o& S
</style>
% g/ z8 o$ a! _: p; v) N* S1 c! ~</head>
8 f, H, x* O3 K6 b& t! k<body>
+ V! n4 J' E" J<div id="pic"> . `* L8 }% q: H% V$ a- g. V
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> $ }' T& y7 I  m8 C
</div> 6 T" Y8 S; v) B+ R& m
</body> 4 l# [: K4 [$ X2 X" ]
</html> , _- W& R3 p2 x/ ?  i' L

& q9 s' k5 m, N. R百分比适应:
+ d  s6 l) ~/ Y  B% ~以下是引用片段:, m# I( i( U0 ]2 k% D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> - V: T. T# ?4 b* |# v/ P, |3 p
<html xmlns="http://www.w3.org/1999/xhtml";>
6 o2 N% w, ~" G& A2 _<head>
/ f' g8 E1 N* ?1 j: a<meta http-equiv="Content-Type" c /> 6 y# g  ?- J& h' g
<title>css2.0 VS ie</title> - ~! A% w& @, l. I
<style type="text/css">
5 X: d$ W" i& v- _7 N3 z<!-- . m1 \5 r1 |/ J
body { 2 v" A3 {; G: z
font-size: 12px;
0 v$ J% o' V/ i3 a: P  h# Ttext-align: center; * e/ t3 @4 U5 d  J# K
margin: 0px; + U8 l8 f6 w6 a' ^$ J) q6 Y
padding: 0px;
) r, h2 K( {# O}
4 i! \# A& ^/ U% I2 [) {#pic{
/ \1 @$ P* B& `. J( ~( {  margin:0 auto; ! k: i( i1 R; e7 a% _( t2 Z
  width:800px; 7 N* S* f5 f' n: T) ^
  padding:0;
' w& F$ c3 N5 P  M2 x. Y  border:1px solid #333; * d2 \! F3 R. x7 e5 w! m: T
  } . d, ~- x- P1 h! ~! T
#pic img{ : k( I* C) Y8 c; b. y
    max-width:780px;
* W" p& T' k# o% d9 x) jwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); , _/ A' R' d" `/ {/ T5 ^
border:1px dashed #000;
% T4 I2 [0 i- R7 t} ; _: R2 B9 g. z  i' R2 \
-->
) Y. |# F% T4 _</style> " q- M: ~% e( W1 d5 K
</head> ( x7 B+ T& N% |0 X3 l7 `
<body> 3 l1 |2 P* G" Q+ L: U; o( z4 p
<div id="pic">
1 M+ D7 L0 y5 j  P0 W<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
9 I) I+ T6 B: d3 H" e9 [</div> : h3 J7 i: @* u. V% E3 B2 o4 k
</body>
  J3 q) u; ]3 Q) _% y, ~! @1 e3 q</html>




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