Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。/ B  j% |% `3 s* _% n
关键在于:max-width:780px;以及下面那行。
$ P9 }  {- ]" f9 g" [7 J/ u8 n固定像素适应:
$ F" m) e5 G7 w) \4 t, l( Y( y# R# r5 s5 F6 K) V4 t+ R4 y& h
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>  以下是引用片段:% q4 Z4 v. }& P# ^/ R
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 5 k) i0 H5 }/ J! R, D) s
<html xmlns="http://www.w3.org/1999/xhtml";> , {. x4 g. N# ?. d( D
<head> " U4 o+ o& t1 W, `
<meta http-equiv="Content-Type" c />
) A6 S4 J+ j$ P<title>css2.0 VS ie</title> 0 Q. @# W: r9 v! [8 Z% |8 S
<style type="text/css">
/ k3 G3 E1 i- w4 ?<!--
; O5 W( r4 i9 t# Ebody { 6 M) N  [* @. v1 M5 J
font-size: 12px; , k5 r/ F- ^3 `0 b: f7 q5 x
text-align: center;
: V5 J8 N/ u1 p5 i% R4 Umargin: 0px;
5 y+ c4 {8 ?" {! s4 O2 Wpadding: 0px;
5 w  z. l  q& R1 c} 3 I9 i  R* y. d+ n% \* `! j4 m
#pic{
6 m2 i/ q# D' F! J% T  margin:0 auto; " \/ u) A; w: Q4 D; D  G+ r+ a+ A
  width:800px;
  m) g$ F& b0 E, c- F  padding:0;
. t' D* c/ J6 G7 U' u/ m" n  border:1px solid #333; / M! ]* N3 v: r" u: L
  }
2 i$ J- a4 p# Y. g* n: [% A& X, {# E#pic img{ 9 t( q$ b2 l! L3 K+ |3 }. L
    max-width:780px;
1 g/ w+ D9 m7 [! O& Nwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 3 h; {. H4 p4 q6 H2 B4 d4 r
border:1px dashed #000;
+ f5 [6 q% z2 r$ o7 d% D$ _} " v4 X1 }; h! X3 I7 R
--> 5 C# P" [  m/ m. G& c8 @# M" g
</style>
' E) M* _& C0 H- t</head>
/ p; l* s8 Q# R' J0 A! o<body>
' _. c9 t) @. F+ \6 J- u<div id="pic">
& q( _/ K# a/ P) u# |<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 3 F+ E. D$ q+ a1 U6 i8 E
</div>
) W; W( p; n0 d( }/ c</body> $ ?4 t/ E8 e1 ?0 o/ K
</html> / v$ `. |3 F  i0 m0 v
/ d& x# V) ^4 j4 }6 j* [
百分比适应:
0 g; N# l  @% ]- v1 k6 p+ E' O4 M以下是引用片段:: S5 y! k. W( I: [/ g) S3 y- r" C, \
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 ~1 I- o' d/ p1 d<html xmlns="http://www.w3.org/1999/xhtml";>
. A* i$ `1 v% S1 E; G<head> 9 v7 r' `9 l1 }/ P
<meta http-equiv="Content-Type" c /> 0 P/ C- n6 b: z% l
<title>css2.0 VS ie</title> + i8 [3 k' o; z
<style type="text/css"> 3 \( g* W+ p5 v8 U2 v) s; V/ N
<!--
+ X/ p# F3 ?2 \1 }( N. f8 vbody {
$ I& p. J* p$ w! o; t/ hfont-size: 12px; - p, o. V) z# [4 q
text-align: center; : T" v6 t0 U+ B) P
margin: 0px;
+ t0 }# }* e2 Mpadding: 0px;
' [( u1 @' M# U0 L. x+ R5 d1 R} ' S: Z# V) K6 `% a3 r  H& t" [
#pic{ 6 T6 @- G& }' A# W
  margin:0 auto;
1 @/ D1 [& @6 k+ Z  width:800px; 6 o2 G3 s: L' R: d  H5 S
  padding:0;
5 u- z( ?# O! q: e6 k% J: r. X, [/ X  border:1px solid #333; 0 D( |' B# O5 Y4 m% \5 F
  }
: O  q2 w4 p- k' @#pic img{ - P) g" X1 x+ F2 ?/ P4 j
    max-width:780px; 4 E1 q8 F' F% L' |+ P7 r
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); & d: n( i, _3 {; f7 K: ~+ k
border:1px dashed #000; $ |4 _# _$ b( I8 j; L% F. p$ p: Z  f8 u
}   g/ U. y6 {: w! O1 Z/ Z
-->
! M! `% {1 G' ~) K6 K* p, X; u</style>
! \, g- y) J9 t; e3 M* x7 j% A5 U</head>
6 o% D) b) j! k/ l* S<body>
( I* L$ Q" c! X# {5 @<div id="pic">
2 E' Z$ T, j2 w3 o; \<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
( E! |  f. Q8 [2 c7 I1 O</div> 1 t. y  l; k( I9 l
</body> . E$ ?$ ~% P3 m4 ^5 p# h$ B! b
</html>




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