Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! d' P- s( c8 B. k# |关键在于:max-width:780px;以及下面那行。- X4 C: _9 H; @1 B
固定像素适应:
& G7 B/ [# j( I$ |, V( a+ l. N) F# a9 `
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>  以下是引用片段:
& L: ]' ^0 ]- z6 y6 F8 ^<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> * s% `" `* y- ^+ ~0 y; q$ u
<html xmlns="http://www.w3.org/1999/xhtml";>
6 M: E+ Y* U/ n; e<head>
. h2 z' Z0 e9 z" _2 l1 l<meta http-equiv="Content-Type" c /> ' X  I/ y1 Q9 s; ?
<title>css2.0 VS ie</title> 2 C4 _4 m  U5 U0 D, R! N$ h5 v) H
<style type="text/css">
, `% C- G7 Q5 B# ~  L- h( ]0 ]<!-- 2 Y) Y8 Y  O+ Y/ z" e2 q
body {
6 h- b9 T" V! w3 s# F  N7 afont-size: 12px;
6 _8 a/ S2 }4 x( }5 R; Xtext-align: center;
& P) `; s  G* ]- m6 rmargin: 0px; 6 t: Z9 q$ G6 `  U3 Y9 ^
padding: 0px; & v& v7 q- e6 j9 ?( n( y
} 5 @* y2 V, d, I1 I, q1 F& H( a1 D
#pic{ ! [8 S/ Y% a( r3 H: r# E# O
  margin:0 auto;   [  M# G$ L. V, F6 V4 t- \* b9 `
  width:800px;
* G! W1 W# K8 e0 S1 h' [) K! ]/ P# e  padding:0;
8 p0 q9 k, w8 g/ s) p' ^/ C+ w  border:1px solid #333; ' o* w$ m6 p4 s
  } ( {  e2 s' F. h% y2 D) a" u
#pic img{ 0 F7 V8 r9 t* Y4 E- g
    max-width:780px; 8 N. \/ B# E7 L2 o7 t/ i5 l
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 8 c- c8 t$ S# N2 J* {& w3 N* e
border:1px dashed #000; $ B& T" k) T; T/ ?& ~
}
( J1 o$ N7 y6 t* {+ w-->
. u4 p! ?: O6 c' d2 Y</style> 3 j/ g4 O6 n/ x' `/ I
</head>
  v! |9 e$ K+ v( V' w4 e& q<body> 6 y! q" j" M8 S; @$ M- U) N3 x
<div id="pic"> + S: y. S. R+ o; G( I  w
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> . f  c# {& e% T0 `
</div>
. ^" W. H* Z) S0 l- _( k</body>
' L5 U8 D, ^; @$ a7 J7 ]- e8 H7 C</html>
5 g- l# B: x+ \% d* J( p) S
% K& o4 q9 \2 R: w百分比适应:9 O; Y+ V+ ]6 ]0 J' c2 R
以下是引用片段:
' }) z' k+ p; b<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . I1 `( x! c2 e& F# q/ A/ F+ k
<html xmlns="http://www.w3.org/1999/xhtml";>
0 x" b! {/ Z7 h, ]2 E, L8 g<head>
1 g4 ?3 p( t# t<meta http-equiv="Content-Type" c />
9 w+ `0 Z& P- r: x& l<title>css2.0 VS ie</title>
5 K9 j$ H; W2 H3 |1 W6 y  b$ ]<style type="text/css">
0 x+ k+ l# X0 U# Q$ w<!-- % e# s' r/ x( R" a& g2 d+ h2 y
body {
+ m; _. i+ _6 l$ p* v" Q" i8 ~font-size: 12px;
5 e3 K$ G4 E" C/ Btext-align: center; 8 `$ x+ i$ t5 x( i+ X
margin: 0px;
- a5 A" u& `/ j  Apadding: 0px;
) P  F( N6 |2 x) ]. j9 `, n4 X8 H}
( N8 a5 g) L5 s#pic{ & \' |" e& z- P# F/ A4 G. x! @
  margin:0 auto; ; v. F$ e( \+ q0 [3 E+ o
  width:800px; 2 i% k8 C: N5 o" _4 n  r
  padding:0; 2 a% D7 `/ V+ y3 M
  border:1px solid #333;
3 k0 N: ~# W9 A5 g+ P  }
: G3 l" b: `) O' _/ ]) W# M+ {1 p( L# m#pic img{
7 @! X, E  n! y2 I: R1 X    max-width:780px; % a# w# u! S1 x5 v" n4 b
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
' Y3 Y! V9 o1 n, I1 z0 hborder:1px dashed #000;
# ?9 d! I  x! B5 y+ I% d3 P} ! m0 v3 C9 S. H: Q
-->
5 f+ ]" Z, \: O" G</style> " _5 |7 R+ o) A0 L0 H
</head> 1 _) m- o0 S# X7 A% E* s' R1 k
<body>
, w' W" O3 p% i/ {5 U' o9 u) L<div id="pic">
) w, H0 b! o6 h. h3 i% ^<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 4 V0 Q. p. f9 D3 U9 n
</div> 0 I+ p+ T( D" _1 T/ a: K0 P
</body>
7 [3 ~% X- t" E$ M' G</html>




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