Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。  l* I1 G5 p) h4 _
关键在于:max-width:780px;以及下面那行。; N4 I1 O& s  y$ t' {! o0 n
固定像素适应:
8 @' `1 a3 Q" `. L7 w4 Z: L% A0 K
. Q! o8 z6 b* N# x# ^7 E% S$ C+ vdotted; 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>  以下是引用片段:! e  @" D$ m; G: l- H" i( J
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 d/ [' c  {- s" b; x<html xmlns="http://www.w3.org/1999/xhtml";>
8 {2 e) F5 ]& U- g- ]<head> . K! g) M) K. G
<meta http-equiv="Content-Type" c />
9 S- e  L% P: t1 `<title>css2.0 VS ie</title> ) N# y4 ]+ G9 {/ c0 S3 C
<style type="text/css">
0 p) C9 k2 B2 V<!--
8 ]! K. o9 l* R8 G; C, j) zbody { # H* u# k9 B! [: `  s
font-size: 12px;
% }8 k; k& r. I+ h9 n5 U# j' @text-align: center; ) c6 O: i& s: O8 J
margin: 0px;
7 ]+ @2 o+ P. s  ?9 ^2 apadding: 0px;
; @2 x0 I! x$ |# k: Y$ s}
1 c; X  W3 B* l4 w#pic{
; D) O* _8 h9 L  h' }  margin:0 auto; # _+ ?" D9 x; `
  width:800px; " m; z+ c+ }7 b9 u
  padding:0;
- [1 n* k7 j4 o$ M  border:1px solid #333;
8 ]& q& R# a% K3 J  h# j  } 5 m$ T7 c2 Y0 y% |1 Y2 a& A
#pic img{ 4 \& e; Z  _3 _* v8 }& x4 a
    max-width:780px;
- ]) H4 O( O; M7 m; S7 z2 _+ y. Pwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
1 Q. C5 ~% G7 a* M) Dborder:1px dashed #000;   Q1 v# M/ L, F$ g& H; @! A
} 2 q) K5 L) @( h% G0 d/ o) L# P
-->
! q5 j) n. w  G1 Q+ E</style>
' C/ }0 ?6 R& r</head> 8 f8 @9 }  @- [( Q+ ^7 G
<body> 1 p/ q9 P. H% ]6 L
<div id="pic">
- n4 @/ [5 q; d$ A<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
7 x- ?( ]# `  H" Y</div>
3 Y6 M8 P  Q7 u8 G5 l</body> 6 i3 l! a1 Q4 T5 b
</html> * s' L4 w6 P2 \/ k

  K* a7 \+ T0 H2 `4 {* ?$ O百分比适应:. G  f1 J2 v9 [
以下是引用片段:
# x* G, t/ W2 _0 t<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 4 U' }2 Z# g6 m' o+ H" g
<html xmlns="http://www.w3.org/1999/xhtml";> ' C$ h$ C- Q  y, x/ }! A2 f
<head> & i4 r6 U2 ?  S+ o0 m3 ~. I
<meta http-equiv="Content-Type" c />
4 T. V6 ~2 o/ w: i( C<title>css2.0 VS ie</title> - c% m3 Q2 T  T* ]) v$ U; u# s
<style type="text/css">
+ g4 _+ Q7 _9 W4 l( A: H<!-- 3 I, j, L  b8 q( Z
body { - M5 h1 K* F, Y/ b0 q' j
font-size: 12px;
! |, b0 c# {' C* z' P: s6 i! \( Ztext-align: center; 8 `+ [3 t( G' l4 q! [
margin: 0px;
9 `* Z) @( D: i* kpadding: 0px;
! q& i+ I) S1 p} " H4 m( F. m- }2 t+ i' i0 I
#pic{ ) @3 g6 t1 D7 N/ h  m
  margin:0 auto;
0 P  y4 C- Q/ o  R' F  width:800px;
$ t7 E0 C6 B. S- d; }( v# z" O! A  padding:0; , D' K$ j: q7 P# s
  border:1px solid #333;
/ p2 i  v3 a, q/ c  ~  }
3 t+ @; g" Q" a#pic img{
: k# k7 b+ g1 K+ t9 q; d    max-width:780px; ; @, ]5 g3 _  c. ?
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
3 U8 _: |! L# z* X. s5 g1 W4 oborder:1px dashed #000; ) d/ m  Z/ D. V9 g' A) l7 I
} * T4 i0 x# X. G6 t' |/ V0 c/ N
--> 7 }# g6 }5 z2 B+ a0 T
</style> # S/ H$ H1 J8 ]) ?; `8 Y2 v: |
</head> ! A6 }6 w& A- ~  t- g' {, C
<body>
7 I* s6 T# G# v6 U) |<div id="pic"> / ]# Z  _+ a, x* ^
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> - Y. N" ~( W0 z$ S  c" y$ `
</div> & `3 b- k8 h2 A6 R% @) E
</body>
; T5 j) M6 A/ p% D- V2 M</html>




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