Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。* t( G, z& Y6 C
关键在于:max-width:780px;以及下面那行。& Y9 ~9 H. X4 l, E2 \
固定像素适应:
" B* `! U3 `' z( X5 T* O# V" r( \* E" r/ ?1 k5 C! [
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>  以下是引用片段:
$ P5 L( D# k$ c& N, v<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ [5 K, K8 e+ F1 i2 @$ C( h5 u<html xmlns="http://www.w3.org/1999/xhtml";> & J  _0 u( c8 o0 V/ }2 S: `
<head> - \! ~# J3 |" L+ l/ l/ a0 C. \
<meta http-equiv="Content-Type" c />
' z4 G! A$ h* _<title>css2.0 VS ie</title> ' t6 F% p1 ^% a
<style type="text/css">
$ L4 h. \2 o  a. j<!--
+ T9 d4 W' u3 i  U# ]* dbody { % G- B8 A( D! w; o$ q& ?' M
font-size: 12px; % _5 D5 E+ z( |7 o$ c
text-align: center; ) S! x) U/ X; c) d$ ]' S
margin: 0px; ' U' t% s* ^) Z8 B
padding: 0px;
& b- i! F& z0 ~: D}
- S- `/ _" t0 ~' a7 g9 _/ e4 u#pic{
0 |6 n6 d4 Z: W  margin:0 auto;
, R$ T9 {/ ]( w6 V# O. d  ?$ J  width:800px; % O3 e4 u  o" c% ]6 ?( x
  padding:0; . `  L3 |" J: J# h. V' D
  border:1px solid #333;
7 G1 H1 M% K. q2 O  }
9 y% J* a1 ]+ u- B#pic img{ - u$ q, o; u2 [; K0 c; \
    max-width:780px; ! w+ N# d5 O( D. k
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ) P0 C2 @- t8 }
border:1px dashed #000;
3 v3 Z, V3 N3 Y" H+ P9 ^: o6 r+ X}
  N7 i, ]+ a! t  l) E0 C) @-->   C1 i! j, ]& e  u) h7 }
</style> 8 P% a3 @& l3 J
</head>
. E+ m0 Q4 _- r: I! ^<body>
- D7 G  a0 x, M8 k8 r<div id="pic"> ) v  @3 n8 ], ^& U/ m& e
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
' B5 N  F; N1 c' k1 F0 X# W$ n</div>
7 X8 b6 E& g# o5 A' q- |+ h  {</body>
& L6 `& I* m  K/ j</html>
& w2 s. G& R7 B7 n( E& }( w5 H& [( ^% r/ V
百分比适应:$ A' l* M# `7 e" w6 w
以下是引用片段:
# B" i. S& p5 v% ~) x/ b<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
7 {" [; {3 U4 T: t  q% J<html xmlns="http://www.w3.org/1999/xhtml";> 3 l* y5 x( `: P, b  s+ v
<head> 5 h. g1 a1 H/ o7 f
<meta http-equiv="Content-Type" c /> 9 p6 B& T* Q$ K6 q9 H4 s
<title>css2.0 VS ie</title>
4 |. Z( f' f! ^* q  @' G<style type="text/css"> 4 \7 K/ _# Z$ Z2 `9 c( q+ y
<!-- $ n" ]5 p6 s- }* T
body { " N" h. q. v+ v( b* o" y1 p( q
font-size: 12px;
7 y) I/ x; F& K6 |7 q" etext-align: center; : ?: ?4 Z0 ?9 L* K, h
margin: 0px;
- P2 U+ ?4 g: N2 L+ r- p+ F, Npadding: 0px;
+ @! _; i1 L$ C6 j} / l) B( s% S  @
#pic{
3 ^5 Y, W- M: ?  margin:0 auto; ) Y1 Y* h( H, {
  width:800px; 8 ]4 w4 V: z" i/ `, D9 y& J
  padding:0; - Q. _% e9 ~; e, ?  Q$ R* p
  border:1px solid #333; ) e1 ~- L5 V7 ^% ~  O  P
  } 5 s3 ?- u4 D$ l
#pic img{
+ |% Y9 U( x5 p) m! ?) D    max-width:780px;
# `1 W& W% M+ cwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, g, i2 v/ e! v( Bborder:1px dashed #000;
; W1 _1 F. f6 C$ |- C& R& X4 Z} + D2 e& X* I5 ]1 M! A
-->
8 w; C. ~9 a( i+ H' G</style> 5 F9 y+ ^5 X  |( W
</head>
$ a8 |' [0 J+ a5 l% h<body>
7 U: a4 {9 |" @! Y<div id="pic">
1 K) t3 `6 M. a' [. r& o<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
6 B5 j: e1 y) j8 Y9 x* A) f</div> 0 T2 `- Q4 P5 _9 j
</body> ! b+ q) P, j1 H7 ?+ n
</html>




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