Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。7 e" k# w5 z4 d1 e9 Y& k3 }
关键在于:max-width:780px;以及下面那行。; _- Q7 Q' K" X3 v
固定像素适应:, |" {6 \/ X3 ?- e" {# K

7 Z5 @! f& b& k1 z1 A/ |9 F. L5 n: xdotted; 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>  以下是引用片段:
1 Y  [  q6 X, o. p% v<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ' c. y% {7 X( b
<html xmlns="http://www.w3.org/1999/xhtml";>
8 M# I9 f; t. t<head>
" o6 s; C  U4 s; l7 R. k<meta http-equiv="Content-Type" c />
2 h' K8 ?; q5 ^. t% x<title>css2.0 VS ie</title>
/ X" m/ B9 Y( e$ k( a! ~; y<style type="text/css"> & B( g; I# g0 K: L7 N
<!-- + E3 R5 n6 g$ v$ I+ Q
body { : h+ M: I4 {* @. g% w$ N6 p
font-size: 12px; . T! F) P: U9 Z
text-align: center; 9 S" a$ X5 Z6 ~
margin: 0px; # P  Z/ Q) M4 }" g6 w  b3 ~/ _
padding: 0px;
9 V& |& C0 Z# p! q: F6 A}
/ w& V. @9 _3 I; d' d% p1 J0 Q6 u#pic{ # [7 J1 P* N9 o6 Q: Z# T) V
  margin:0 auto;
9 s3 b( p2 L! z: A  width:800px; . U1 t: I/ C8 ^6 y6 j% t; v+ P9 e
  padding:0;
9 u: _5 E1 m# @3 M6 Y) G9 L4 |  border:1px solid #333;
+ U- ^4 f- }! J' ?. x8 n. h) f  } 4 X( r& l8 `$ i$ x9 D. P
#pic img{ 7 o" g- M# S  X+ E1 j
    max-width:780px;
7 @5 `! @0 E8 ^! Gwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); " F3 l/ @( b4 A( r
border:1px dashed #000;
+ S* x& w% |) t) f( [}
; t9 R$ C) E9 w( J0 f' ~-->
) h/ _) ?8 H1 U& N" g</style> 4 l  O3 H$ R0 N: O
</head> ! M9 Y8 F2 X4 z% W6 W6 l  k+ ]6 n
<body> " m( n/ |) T$ ?/ l
<div id="pic">
4 F' I+ o  G* n* c4 Z% i/ K<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ) z: h7 d2 p; e+ f9 A2 v
</div> 6 K9 |8 W! S0 R/ L  Y5 \
</body> " Z' I! t+ s# [/ r* h  |% |
</html> ! U$ x/ H3 |1 v0 u' o2 P, {
) x$ N7 f/ ^# ]% f
百分比适应:
7 E( f, m- \3 y% e1 _以下是引用片段:
. N0 E$ j$ z3 f( `% j3 }' m& B( a<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + x& `0 L& C. T7 i7 p
<html xmlns="http://www.w3.org/1999/xhtml";> * f% P5 i" Y2 @) [0 `4 i
<head> * X- {& A1 Q4 d, p$ x4 L& F
<meta http-equiv="Content-Type" c />
& B3 B7 X# {+ p) [8 U3 \<title>css2.0 VS ie</title>
, p7 f$ J; z9 _) j& g<style type="text/css">
+ k; c! K# i6 _' ?<!-- - V; N# {! j( Y% g  J
body {
# `# I6 |. o4 s* e* n; r8 y) pfont-size: 12px; 3 y! J, Q; t0 Y, I7 J
text-align: center; * j6 f* Y6 G& T
margin: 0px; , b" T+ B2 ^/ N  n9 @3 d' Q: Z; s
padding: 0px;
7 U5 u5 I( c. @6 A6 v  t) N}
0 [7 v# b3 w7 I#pic{ 2 I/ ~8 A8 j% Z2 }, W& `
  margin:0 auto;   l" \5 X2 c2 i1 ~7 ~" }
  width:800px;
! K# U5 y+ U  A, |9 r5 k  padding:0;
$ I5 q3 T# C5 |" M0 D6 H6 `0 b  border:1px solid #333;
' a' A( b/ Q& @) m9 O) d& i& @  }
/ r& ^  Z% @& f3 x% M( b0 f) @- Z2 l+ J#pic img{ , N3 m' h- v* j+ A. c$ |5 [
    max-width:780px; * c1 O( L, ?" o  A. o
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
7 s& e, X0 Q& f2 K7 Y) Tborder:1px dashed #000; . ?! E& j7 e+ W+ o% b; |6 G" t
} 6 \8 Y3 F8 u  \7 O& [- r
--> & o! @9 Z. M* }, {7 f" Y
</style> : R0 C& h0 o6 d0 u
</head> , G. s" b; G* }( C. c
<body>
5 \' W, b, I! A! ?<div id="pic"> - {: V% w; q( k6 o  I$ q
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
3 C) Z7 e2 ^/ h: y9 C9 y</div>
% p8 n, D# S/ W. L3 f% ?0 s: R: Y</body>
% O5 R' Q! Q( x2 F2 ?: N  ?# n7 f; m</html>




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