Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。! q% r! C  x9 z7 r1 |4 ~/ D
关键在于:max-width:780px;以及下面那行。
0 @( ]) e8 N" N& V固定像素适应:
0 I3 Z; L6 Q9 q/ i% y" b- `; D, ^8 o6 f, Q
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>  以下是引用片段:
" b) ~* J6 |9 a8 l4 V4 Q6 Z* t<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; s; }( H8 |+ p; ]<html xmlns="http://www.w3.org/1999/xhtml";> " Q2 C2 O& ~) {& E# R; x
<head>
2 ^; c7 t$ J8 X- v, P<meta http-equiv="Content-Type" c />   q. d: C' r8 d) {% Y  l2 W2 l
<title>css2.0 VS ie</title> " n) N5 ]- `8 [- ]0 x
<style type="text/css">
6 S8 p1 f9 G  p/ H$ ~<!-- 9 k. h# X! E- s* V+ L
body {
* l7 _5 `' D5 t+ Yfont-size: 12px; " s) @) ^' Q0 r/ [9 g$ f
text-align: center; ; K; T- G% E3 |5 z" ~# c. S
margin: 0px; / U: Z" d- ]- {7 |1 \( o/ p
padding: 0px;
/ p3 q! k" k1 C0 ~, ]}
  K/ L( S% p% @0 ^# N6 j8 h#pic{ 5 P9 u) t! x$ v0 d+ z
  margin:0 auto; 9 `7 U, U( X5 \9 j) u2 j& V
  width:800px;
' D7 S, X1 E5 x  padding:0; * Z& {, p2 s; {- f: g
  border:1px solid #333; # I- j5 v" O$ d+ N, u7 B3 @# V
  } 8 V+ f$ N9 _/ ~2 s* O
#pic img{ ) q" m) J* V) O3 b0 v9 P8 J* ]
    max-width:780px;
0 \. G) k* _( [width:expression(document.body.clientWidth > 780? "780px": "auto" );   x; Q' U/ `- e# \: d# a0 L
border:1px dashed #000; ) e" T4 c6 J, t6 k/ i
} & w5 e& A( X& l7 f
-->
2 z8 T, a' F) m4 _/ o5 h9 H; @! W</style> 7 R3 A: z( x# K* R7 v: c8 J3 K
</head> ' ^0 Y, e) l6 g6 U; A
<body>
1 m+ v1 p7 O( q  F8 l! X0 T. S/ H<div id="pic"> 6 w2 n& }; z" A( L  i8 s; j5 [
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
  C5 O* V' B1 _5 B</div> 0 b/ B: d& K" L4 i( C+ j
</body>
5 K& M5 z: v5 s. o( K; ?8 F( G</html> 1 s( J9 V8 v  }  t0 o8 Q
( B% V7 g2 U2 Z$ ]6 B3 ~
百分比适应:
  N6 H3 c6 z- r/ R% `( ]+ Y1 u以下是引用片段:9 C) ]+ O( F  j  e) c1 ?& Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . `5 a0 T) x" J* m+ R
<html xmlns="http://www.w3.org/1999/xhtml";> 3 [. [* T4 t- Q6 T
<head> / n( b& H7 P- f/ Y9 r9 e
<meta http-equiv="Content-Type" c /> % z% V# h  Q& u4 D0 p# N6 Y. m
<title>css2.0 VS ie</title>
& }$ N! g; j; ]& S) n; O9 V<style type="text/css"> - Z9 Z0 B2 A9 z: h5 p$ y
<!--
7 M/ ^" P/ s! \- X3 [: Cbody {
( f( }% C/ W% S) l  R. \! U9 u7 sfont-size: 12px;
( n1 m- r# u3 Y! ytext-align: center;
, Q  d$ _/ P$ R6 q( g1 tmargin: 0px;
7 n! {9 H+ R0 |. A! epadding: 0px;
5 ]$ L6 k8 u& ]% N7 j' z% @5 h}
& W6 c6 |  P4 b  D% {3 a- y; q% g#pic{ + p* F, `; M' Q& ~0 M/ a
  margin:0 auto;
& w3 @& e) R# N: c( w  width:800px;
' b5 Z* s8 {* y$ F  padding:0; 5 B9 L/ e8 g# h/ |9 C/ k* r
  border:1px solid #333; ) @1 s0 ]2 a9 L; H
  }
! u/ g* H& {# a#pic img{ . ^* l* S. S5 ?7 _- F% C- ?1 e
    max-width:780px;
- W, T; q/ _7 r8 n* dwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
1 Z5 @5 V0 ~& ]* b! n3 V* gborder:1px dashed #000;
( A( `$ J' b8 [! [3 {} , ^3 d+ R1 v1 d* L1 f: p2 }# j# y
-->
" ]/ ^  W9 x3 [7 ^</style> ) b: y, ^0 X4 a2 v* R! y$ u7 {
</head>
  ^+ z* M. p2 l# x2 r  E3 y' A<body>
: @, v- U' ]) Y& G$ A+ _: f<div id="pic"> : t1 i% c! q0 L9 P! j' q0 Q
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
0 e0 e' N" q+ O</div>   P* w' \8 w" j0 m8 w- F) u+ Q1 F* b8 a
</body>
) `. P6 @: n$ F! v; L</html>




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