Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。5 E3 d9 k4 y, E$ N( B
关键在于:max-width:780px;以及下面那行。3 v) T# C0 Z0 y
固定像素适应:
6 @- _+ Q- [' I
7 m' g/ ]: T1 g9 n7 f! U! s9 Ldotted; 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>  以下是引用片段:
8 Z* r5 M& p2 k<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 9 z7 G& Q1 b) `  f
<html xmlns="http://www.w3.org/1999/xhtml";> $ e& Z9 F( Q: B9 e& K0 n* }3 S" _8 i
<head>
4 e' U' m8 b$ f1 j4 x4 Y* j<meta http-equiv="Content-Type" c /> : ?. g. w3 ^+ O8 ~- H6 y
<title>css2.0 VS ie</title> 7 Z0 h+ M7 E/ G+ n
<style type="text/css">
$ ~+ Z/ i1 b( C7 S' c' I5 C) `# t<!--
7 I' v7 J. X" e% c. v0 }1 vbody {
# P+ [3 s3 F* S2 F$ Ufont-size: 12px;   D. I% Y" F; T; `7 S3 e
text-align: center; 8 j4 n. ?1 j; _1 F# T
margin: 0px; ; L) T; c8 K# o# i
padding: 0px;
4 v. A& _2 k9 j}
7 [7 n1 I) s' i7 y3 G$ o* Y#pic{ 3 P5 U- }0 M7 T, x6 b! [: y. `
  margin:0 auto;
) k7 m0 l8 w5 R4 V5 Y  width:800px;
" n1 D# g" @3 {# g8 S6 N  padding:0;
. M% U8 y- F+ `# z6 p6 B  border:1px solid #333; 6 `2 @# ?, P: r
  } 4 K# I+ q) C4 A4 Y/ |
#pic img{ 8 F- m" J3 U1 O3 h. _
    max-width:780px;
' \3 g( d$ [& ?& `& ywidth:expression(document.body.clientWidth > 780? "780px": "auto" ); : a( G: L% e  g' W# m) |  d) _) w: B/ c
border:1px dashed #000;
7 f- X/ f- j6 o+ }" V}
3 {" q; i  j! `9 a3 ^--> 5 n: `- ^( u/ C" _7 A
</style>
; D" z7 U4 c* O/ m</head> ! \- r6 Q: v$ [# r9 N! \
<body> , Q4 i9 G; P- `0 x
<div id="pic"> 3 x. @- c& r% _/ G$ B$ _
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( f, a- @+ p  m" M& o; H2 [- i, B
</div>
/ @* M! J- F- d' c</body> 2 E( Q0 ]. J: b; R9 b  h
</html>
! Y# P& Y1 i, ^; m: Z  @+ i" t( X3 X! d/ Z" a4 c6 m8 z
百分比适应:* E5 t# Q1 H5 d! Q; Q, `
以下是引用片段:
6 j0 ?; X  |6 y7 V, U+ A<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
  Y: x& \' k- ]( T3 Y9 K<html xmlns="http://www.w3.org/1999/xhtml";> 6 }/ A' e7 m: W5 r0 l: u$ k
<head> ' L" \# L( D) o0 v. R4 H5 F6 }
<meta http-equiv="Content-Type" c />
0 D  G0 O3 M0 J) g5 J: C<title>css2.0 VS ie</title>
. t6 r+ H6 p6 T% v* [6 s& }  c; h<style type="text/css">   v/ s( h- `- i& D& |( _/ p7 o3 q7 ?& B
<!-- 8 ]2 L/ C8 ^" Y9 `9 Y7 y/ m; o
body {
9 B& C# \) s9 afont-size: 12px; ) }; _. E1 G+ x' [4 M( N
text-align: center; ' n2 O7 ~; ]( {3 }$ W4 Q$ N
margin: 0px;
, l/ O& H) P- U( B9 s! [- Spadding: 0px; & G0 }) p: e) R, _# z- v: w
}
- q7 r: J6 r! q+ ~) r" K1 [8 ~! s1 c#pic{ 3 [8 v+ I4 n, |5 V# C0 |
  margin:0 auto; ' B5 K( x9 H' n# _6 h0 s+ `6 [6 i( z
  width:800px; 6 B7 V! p; ^1 Q' D
  padding:0; ( g# }- h" _3 i$ E, u, N0 v& v! K
  border:1px solid #333; 1 I5 @+ u) ?4 i+ m5 b
  }
# @& ]8 T  @6 Z* t& S. N#pic img{
/ \% Y5 L; }! b    max-width:780px; 5 W5 }8 C5 t5 e* L9 r& F
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 5 A4 n) X4 N* e1 O
border:1px dashed #000;
: O! ]+ Q# I* k. }5 B}
: n5 p- z; s) }$ }. ~4 M4 Q7 m--> 1 L: o1 u/ q5 g
</style>
$ q5 d3 @1 B0 A5 N1 ~9 w</head>
5 Q7 {2 ]. b3 `- }, T7 Q<body> 0 B2 N1 I: T; u% B0 z: i
<div id="pic"> - z' J- `! ^0 X3 ^6 t
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 z# M: N$ t$ ]% h2 W* S% c2 N6 V2 U</div> 0 G  U$ z: E+ Y8 z3 H
</body>
; ?; g, o$ l6 v</html>




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