返回列表 发帖

在DIV下图片自适应的解决方法

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。/ q8 K& U5 B; J/ I$ h& T3 `7 I
关键在于:max-width:780px;以及下面那行。
* O5 Q5 h1 c6 d% a! k! V$ D! ^固定像素适应:, B& u6 {+ ?, R) h- Y9 U
% l0 p8 R9 ~2 O# ^  ^
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>  以下是引用片段:3 j$ g8 T% n1 t  Q( C+ k
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% _  p. b- ]9 g( h7 X<html xmlns="http://www.w3.org/1999/xhtml";> 5 ^1 O% y3 Y. X# h( c# f" j2 t5 V
<head> # G3 g& V8 }3 h( d+ d! ]* T
<meta http-equiv="Content-Type" c /> ) q) M* }: D. A5 O, S5 @$ [* l
<title>css2.0 VS ie</title> + G" V1 m# w, s6 z$ F$ }1 q' f
<style type="text/css">
3 t4 M2 F/ x6 B<!-- . L" l+ u9 X! ?& U( ~
body {
9 i- i6 S7 _8 Z) M; x# Q4 l8 x7 S; ?font-size: 12px; 1 \; `) W5 p* V: S% ?% p
text-align: center;
1 B/ }# e; }5 ]* r3 p0 amargin: 0px; ' A7 z  q* e( i$ H/ j" Z/ g
padding: 0px; + S0 \% a3 c5 Z
} " y7 [1 ]3 t3 ~. ?8 Z* e
#pic{ , U3 z% G5 B6 m' a9 W
  margin:0 auto;
; p' ^* J/ f  j, t) c  width:800px;
9 L$ H/ \! M2 I+ Q  ^) E, s! ]3 B  N  padding:0; ; ?* }* z! Q: ~9 l% S; P6 h
  border:1px solid #333;
  \  E8 i& n& n  } ) R8 ~, ]5 f0 P, n9 G
#pic img{ # y, A) R/ M  R+ l3 M  [
    max-width:780px; ; p" H4 ?1 n6 h; s
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 0 X: Q& ~9 _* L# i$ N: Z$ {  e
border:1px dashed #000; - C3 L& M0 i& V: A1 h# z5 z# A
}
% J+ ?# K4 \* b6 b-->
$ p" [. ^) N0 ^( R9 F3 E' l</style>
5 [; W# `  v5 O9 y</head>
3 S( {% p% q# J% ~6 K$ e0 h<body> . y! q0 [" H0 C
<div id="pic"> ! w% Q% X2 g+ s# X+ Q3 ~  t: O
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
  q2 b8 G; U! J! K0 e" ]( }3 q8 ]</div>
: B, a, G, O, c7 K3 @- Z$ Y</body> : ~$ t" ]8 H6 X( _
</html>
. _6 V" R: h. L" q# n1 Z4 a. i5 Q: w8 z* D
百分比适应:; d7 I- x4 V$ K
以下是引用片段:* D, \; A  `4 C8 C9 g  a: w
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# G5 k8 I, \% Z1 v7 M<html xmlns="http://www.w3.org/1999/xhtml";> # {8 A& ^) c: X# c
<head>
" m2 ?- ?) H# V7 G" \<meta http-equiv="Content-Type" c /> / Y% i0 r/ Y) X# c5 j0 |* @3 f4 d
<title>css2.0 VS ie</title> : l" u; R6 _5 f( Z6 p) r2 l5 o  i
<style type="text/css"> - f+ k+ Q' t0 \; _/ U* \
<!-- ; @& c% H/ H. R- s. g% f( ~
body {
9 t8 b" \) b- _! R: Ofont-size: 12px; , Q) l1 v2 l) s4 y. y$ [' H. Z
text-align: center;   S6 S3 [* D5 \; D2 k. c, e( P. `
margin: 0px; 1 H7 N5 R' x* c; t  H+ V7 e
padding: 0px;   R- t& _/ w" e) x# G( y
} + f: i0 U7 ?8 K" o$ I! u. r- f$ _# B
#pic{
+ M7 e7 c* T* v- s  margin:0 auto;
! X/ Y, j3 @3 c* I2 d' U  width:800px;
+ ^5 x: @% X8 g* c; l5 N; q  padding:0; 7 [7 r$ c+ G: g7 |  g9 K
  border:1px solid #333; , N3 u7 M3 c) q
  }
3 b) j: w( F8 R7 N+ s  X#pic img{
; l' v. Z# [& r    max-width:780px; 9 E/ w" ?( p; U- i% M5 a! Y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); # o2 C1 Q) Q9 L' u- f/ P
border:1px dashed #000; 0 |0 F5 l6 Y4 Q! k& ]
} % X" l3 |9 ^: \, q. d$ W
--> 6 {2 q0 J8 f  ^0 B6 f  U; V, h" t
</style> 7 r' R+ [6 U3 m. x
</head>
) _2 [; @9 Y9 U) A9 \' X<body>
6 \8 j1 q, Q! E4 R" V8 c7 ~1 l1 o* }<div id="pic"> + w; k5 f& E2 X' `5 ^1 `: Y. K, T  }
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ; b  v5 A: k( J) G) c0 r9 Y
</div> + j$ |  b" ^: w  @5 D) h% B" ~
</body>
1 H- [! W+ T+ {2 t, }; f6 Q" O* a</html>

返回列表
【捌玖网络】已经运行: