Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 P; R! h3 F5 f. }关键在于:max-width:780px;以及下面那行。7 Q7 N& Z) S9 o) |2 G
固定像素适应:3 E0 B) q! C3 S8 t5 g; j

* Y$ l3 d! J. l7 L4 ^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>  以下是引用片段:
  _: z- W( e) i, J* G0 h) v<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 5 U, w( f! G$ K$ o& f8 _+ \$ C% z
<html xmlns="http://www.w3.org/1999/xhtml";> " V6 l, I* u$ _$ l& B& _
<head>
- d1 q0 U5 C2 h: R) i! S<meta http-equiv="Content-Type" c />
! b* K' _8 X$ M<title>css2.0 VS ie</title> % q" w: ?; x& U7 \
<style type="text/css">
  Y. Y" a, Y3 C7 C# |<!--
' O' b* H5 P' j! Bbody { , R2 T& [; Y9 G: K" \) A
font-size: 12px; * E; X* D4 P* N. A: G0 K) f
text-align: center;
) T" g. a" T$ u1 z. M) Xmargin: 0px; 8 ]& g* v+ W' A6 _
padding: 0px;
* D" v: w, s' _$ K7 @" H} 5 c! o5 }2 ~# X0 ]
#pic{ 6 U3 _% {0 Z" ]% M0 }6 Z
  margin:0 auto;
9 T5 V* U$ Z6 _7 z  width:800px; & b$ ~2 [* F( C! P) a; T' h4 }  I
  padding:0;
. e" Z1 \0 |  V  border:1px solid #333; 3 O# [: g, T: l+ Q/ C
  }
( y- \, [) H' v8 v#pic img{
% }% u, d# q% O/ H1 K; }4 A    max-width:780px; 6 C7 z( Q' W4 _0 \" n5 F' D! M% T  N
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ' C$ Z6 {3 ]% j' N! I- ~1 }  S
border:1px dashed #000;
: C* ~4 t; c( U/ `* A} 3 s: n/ {+ v0 _
--> 1 N) l7 n* i0 i- C
</style> ) r6 X4 G" S# s
</head> % K/ J/ L2 N- y5 V" P2 I, f
<body> 9 t  K" f* n  U3 T# s5 y% O6 R$ l
<div id="pic">
' A& }" X$ E2 c3 K) Z) z# e<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> : o$ I5 Y% ]0 a; B9 O9 l0 c
</div> 6 {1 o# @  Z9 H  G9 q- ]0 w: T
</body>
" D& Q3 D0 `/ t3 Q</html> : V& e/ i* b( l8 Q! i3 z: V, _  w/ P

2 x$ _6 }3 n2 _/ D百分比适应:: q5 T  C. \. u! n) E
以下是引用片段:
/ d) Y8 v9 t3 ]0 b$ x<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> - J3 y& M& e. `/ b' r% A) h9 B
<html xmlns="http://www.w3.org/1999/xhtml";> / \  L3 x% v% K8 Q$ g7 s
<head> 2 y* K9 V) s. q6 {
<meta http-equiv="Content-Type" c />
9 G" H: j0 }3 ?3 x- C3 k* ~9 V<title>css2.0 VS ie</title>
  g9 R. T9 L* I+ h<style type="text/css"> 7 t: }$ J4 K4 s  u7 E2 m
<!-- 8 A5 R. ]$ I' I6 O+ S
body {
: p) P' ]1 `, Z) d! ~7 q: Nfont-size: 12px;
& A* f8 p, q5 Ytext-align: center;
2 Z$ W( G& L& Zmargin: 0px;
1 ]# |( V6 m- r7 upadding: 0px;
8 X4 B+ N& s' x9 k8 q% s}
6 c; l- a. @0 `: @  B' v#pic{ , v9 F" x) q% R7 b
  margin:0 auto;
  [6 R- R' f5 i0 W. W5 a& b  width:800px;
' S' ]+ L5 J" P' |! n# N1 z8 q' ]# C  padding:0; + N! Z  K) k! K; s; W
  border:1px solid #333; * w& }  B% S7 ]
  } 1 v  n! K5 u" B+ k
#pic img{
5 M+ ~0 _0 e. {1 |( w2 l    max-width:780px; , o& s' Q& {$ Z; w) u! s
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); - c7 j0 O" u$ A+ R
border:1px dashed #000;
3 ]5 L3 C2 r% r  t! V; W} ( L' c' K" S2 C( N1 @9 m
-->
2 p0 H7 ]! w8 @  L# P7 |$ h$ r</style>
, G3 e+ F; ^8 H: L; _" N</head> 7 O; @- T& S4 q( o! V9 m1 X; N  R
<body>
& ?! V& u  C2 P' I- j7 m<div id="pic">
, e$ [& w! O7 |5 \7 ]5 [: Y% P9 D<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
" U8 }: s( i5 n</div> # f% I+ z6 d$ ]0 z/ T# Q
</body>
6 j. ?4 s, {  ^</html>




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