Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。2 q: o4 U9 `) R# D, D6 t
关键在于:max-width:780px;以及下面那行。+ A* S7 X, ^' p# o
固定像素适应:' Q/ \/ p3 t$ N
; }3 R. |# D. _5 v' Y2 |
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>  以下是引用片段:
; r3 M( _) L/ B- @<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ X# C2 ?, X, q* s. Y$ ~9 t. |<html xmlns="http://www.w3.org/1999/xhtml";>
4 O+ d7 o0 _3 w<head> ' R& r, ^8 M. r
<meta http-equiv="Content-Type" c /> 8 \9 k6 q# u. G
<title>css2.0 VS ie</title>
: u* o$ l+ B( l7 V0 D5 u5 B$ g<style type="text/css">
$ r4 _0 c: c& u' l<!--
, @$ _+ R! {  Q0 x. I( y7 a4 Q' ~body { / c% I. F$ \3 `4 O
font-size: 12px;
2 H2 x9 I1 [8 h( u  Rtext-align: center; + S7 k* S6 @& q( Z
margin: 0px; ' [+ n1 S2 [% n; j
padding: 0px;
6 w8 e. s) R6 }} & b& p# `2 {3 F- R
#pic{
$ l# E) u: z. o$ A. u2 L  margin:0 auto; . J: M- s2 K( @7 Z
  width:800px;
4 N* D. V# y  V) D  padding:0; . c1 y! P- |2 z
  border:1px solid #333;
4 ^: f9 @3 p: Y9 {8 ^  }
4 ~9 @* Y* c/ k7 @+ u7 e/ j# m) P#pic img{
7 x9 x: P* W" t. ]    max-width:780px; ; q6 \/ m! E7 ^) C
width:expression(document.body.clientWidth > 780? "780px": "auto" ); + j( z- b% H% J9 d; q, q
border:1px dashed #000; * F3 O, O) F& P! [
}
& Z9 l6 l5 g1 Y- @! b--> * i8 a. J! x2 J" Z
</style>
, W+ f) A) J+ d% l- Q</head>
. [6 `# {% Q$ d5 x& ?5 {<body> , h3 \- W& d5 p  f8 g, B& G! }
<div id="pic">
# I& O$ l8 d; ~0 \; H<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
* a) m( w: |  ?0 }- w1 q</div> 5 R  M1 J! n7 H. \4 e- X; `8 b
</body>
6 o/ w! X; w  A* a% @  K6 R</html> 1 {; a, H9 E1 I. h4 W% n7 \0 v

+ ^! _# v6 L- `4 ~* ]* Y百分比适应:
  U5 W& s" `; v- x5 s% @以下是引用片段:
1 o) y+ L% m& X' y# L& A<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, J) e. v+ D. j1 Y<html xmlns="http://www.w3.org/1999/xhtml";>   n# q! o( ^8 u- a/ d( J
<head> 3 I4 f  A, I* ?! K% [' ]! B
<meta http-equiv="Content-Type" c />
( x3 k6 Z8 O! F  V% N! r6 a' |<title>css2.0 VS ie</title> - f6 R5 A% W$ s+ M& A1 O
<style type="text/css">   B, x% U$ q0 ]' G* b. ^7 u  e0 [( H: u1 _
<!--
7 y. D, D3 O/ p' S' U: Fbody { 5 t+ H; D7 J2 T& X& f% e
font-size: 12px;
; K% K# N- {0 xtext-align: center; 3 Y) z# ^, s( d+ l
margin: 0px; 9 J: r2 O9 r& N) B" ^1 T
padding: 0px; ( r9 Y( z. I7 @0 Z% s/ D5 a  o+ g
} ; |2 {" V* v3 i  K* W( j
#pic{ - t" l& ^8 U4 Q) U3 M5 k( U: Y4 l
  margin:0 auto;
3 o- s- G: _7 M6 l8 B: ]7 s  width:800px; 3 O8 l; l! b, j0 I2 i5 i
  padding:0;
, {+ d; E) t  ~/ R& [  border:1px solid #333; : K9 S% e6 v) k8 I
  } 6 |. \8 p' O- V9 O  Q- X
#pic img{ 5 Z& v$ U( S% _% @0 r, ]& B
    max-width:780px; & k! u8 s, G5 D
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
7 N/ \, H8 s6 o$ b( Iborder:1px dashed #000; ) K3 k. X# ^, A9 N* q% n- ^5 |
}
* d+ N8 W0 W) n9 Z+ H. c- b-->
. k4 t  w% t6 R. b5 Z</style> . E/ I" m7 a; y; Y; ~- |8 C  L
</head> 7 D- Y/ ^! j; q3 c* u) d. J
<body> . v- _7 S2 s) M# d7 S
<div id="pic">
. z" ~) b& H5 r<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
8 X% ]1 Y' V) C8 C6 v- ^3 n</div> 1 q. N5 J0 X2 X6 x4 j+ f
</body> 4 Y3 E+ Z; Y" }, _  f: |: x
</html>




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