Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
- _8 e. ]$ ^% A) e! R0 M关键在于:max-width:780px;以及下面那行。/ N6 P% \* r( R; V
固定像素适应:
% _" Y  f  U3 {) l$ o: [/ G0 ^0 u7 B; u2 x" V
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>  以下是引用片段:* D/ r: y! Y/ A% N9 }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + g1 L$ N4 G, D5 x* s, @
<html xmlns="http://www.w3.org/1999/xhtml";>
; V: W4 {& U3 [<head>
2 h  `. u5 ^! K4 W9 m" N, u<meta http-equiv="Content-Type" c />
8 R- y  e" F/ |2 c9 Y9 N0 m<title>css2.0 VS ie</title> 6 K  v5 H- I3 K& f0 G! b; |( h
<style type="text/css">
  p# `9 n; f% M<!--
% l. K4 j% ~- }/ M  `! Q' bbody {
# q! C8 I/ v  Z0 u% sfont-size: 12px; 4 R* g, Y  K1 H; g% k
text-align: center; . F- W+ Z4 p/ I# B# T/ U; F
margin: 0px; 0 }6 U# l% H; P
padding: 0px; . @  u- ]- b! D6 f
}
/ ^4 @/ j9 e- B5 w#pic{ + C* j: e7 _6 B+ V" L5 z
  margin:0 auto;
" Y- a3 I- c' z0 I$ \$ b5 P, h. @7 U' D  width:800px; 9 b8 Y& g/ J) C/ e2 ^3 A) B
  padding:0;
2 {4 p1 g* w! y3 h$ ]2 K; t9 H2 g% [/ _  border:1px solid #333; ( u. O4 p, ?8 B" C
  } . i6 `3 k" G7 x  ~+ X
#pic img{
  @3 {9 h9 m) E: |, X    max-width:780px; # w0 H0 |1 k: }; a8 Y+ U
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ; y8 {* ?/ ~1 t1 C& [' [, g' ]
border:1px dashed #000;
. l# C+ q* h. T, N6 D+ M" C1 m}
) e3 K; h/ j+ U4 |( Y-->
$ H0 |: H; d5 Z</style>
& p/ l9 f% ^" b4 e. x</head> : Q& Z' Q, n( ]5 Q+ M# ~
<body>
" ^+ r/ \& |- k<div id="pic">
" l9 [( S& X1 u% p# W7 ~<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
* r# T! J- O4 E5 b8 f3 n</div>
4 H6 q4 h9 C  T1 `1 g</body> 6 P# K1 S2 {' V  u' t7 b% I
</html>   V9 w0 V! `. w
/ r  k6 R+ q' k: l( @
百分比适应:: K: |" D+ i" V( @' U! x
以下是引用片段:
  B% k) y/ d( r1 s<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ y- [  l8 T, ?0 V<html xmlns="http://www.w3.org/1999/xhtml";>
$ k- f7 u5 X% j<head> 5 |1 q  |9 ]8 F' Z: H) ?% v5 G# }( @
<meta http-equiv="Content-Type" c />   X! I+ i+ G/ g) q$ W( b9 ^# n1 x2 Q
<title>css2.0 VS ie</title>
8 k$ @% A- m/ ^, E& |/ `<style type="text/css">
) P4 i0 A1 I# ^) n2 o<!--
" z9 g! i, v6 j9 |4 J8 c# u( Mbody {
8 f! P- W- l' T" D" mfont-size: 12px;
8 m! r. y; ?. b# i4 t/ ltext-align: center; ( H- s! q/ n; ]! ]
margin: 0px;
2 ]. M/ P% d1 G* X# {' Y4 N  spadding: 0px; 1 d9 E% `+ U$ s+ H: `: t* O
} . F5 m, \/ ?7 L+ G7 ?' h
#pic{
) q2 k- c5 k+ E2 ~. z  margin:0 auto;
& @$ }6 ?8 y4 ?  width:800px;
# l# F% c' t3 W0 w% @: t  padding:0; - H; p9 I0 W; L) u1 I  J
  border:1px solid #333; & ^+ {& w7 r& A& b
  } ) B) n' w( z  p( p5 G
#pic img{
% w+ A. w9 S1 g$ P/ \& i; T' ?4 p& f$ e    max-width:780px; ' E& q3 |. E- ^# E
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
$ s  J6 P' ]3 |6 x; c" A: Aborder:1px dashed #000;
! ^4 B# n' A8 w( R8 Y1 `}
* S! `+ V) V# q0 ~  j3 @( ?--> 0 r+ L  t, ~5 z6 r
</style> 1 F/ n' n! ~( o1 _5 P6 [7 t
</head> + J: ]) M8 |9 R  B- m8 Q1 T9 b
<body>
( y, ~+ u; a9 i9 Y% O  p4 S/ O2 @<div id="pic">
2 A2 ?4 M& E( Y+ T9 Y& k6 F<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
+ |+ r) v5 ]& J; ^4 e. t</div>
7 [; B" d3 I' Q! c" {" f6 z- _  k</body> 1 {  W2 M8 Z; ^7 k1 U
</html>




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