Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。" T8 E- D7 f5 _/ W7 M/ F
关键在于:max-width:780px;以及下面那行。5 X% R. i1 q2 ^+ N
固定像素适应:. I$ u% L( e: |4 g$ l2 c
, x0 c3 |4 O) y. G( J
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>  以下是引用片段:
+ J% c) H, f3 i<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# v0 W4 i! o4 j<html xmlns="http://www.w3.org/1999/xhtml";> 3 U; `. P+ Y" s0 d7 [
<head>
6 Y6 @9 C! ?! ?: h! S4 v1 D/ y  s" z<meta http-equiv="Content-Type" c /> ) ?8 o4 j6 `) A  k/ {; q
<title>css2.0 VS ie</title>
* n3 F4 E8 Q1 h& l<style type="text/css">
' c5 k" ]5 H2 q; A( ^<!--
( U) C! e* \* Lbody {
/ U/ j0 H3 N5 d5 R; Qfont-size: 12px;
1 [* W- a4 @2 itext-align: center;
8 ]/ K( j% ~) I  X5 G0 xmargin: 0px;
9 n( N4 J0 F% x$ ~$ |padding: 0px; / w# l. b( |* v7 W2 L! r6 a
} ! G! {: J9 l  g; e
#pic{
' _0 ]6 _2 B8 V- c+ j  margin:0 auto;
& J6 U0 L+ V1 O2 y. L  width:800px; - m& h0 `/ X4 d$ }4 {, C
  padding:0;
5 s8 v. @2 S: M7 k% D: \  border:1px solid #333; ( @: Q6 z! ^3 {2 S% w( u2 f
  } : X" {' p5 P1 ^( ^1 S+ `
#pic img{
( Y5 E# u7 J! c( c9 T- w    max-width:780px;
+ h- E% C5 j# Owidth:expression(document.body.clientWidth > 780? "780px": "auto" );
& F8 Y9 b& Z/ H- U9 L* b3 W) j2 tborder:1px dashed #000;
/ o: ~9 ]1 a, C" I}
$ N1 \  W" ~( n3 @--> / |, M) M! o9 @7 ]- r) ]9 r$ K
</style>
5 I* i+ R' z8 |: g</head>
$ L& b! W9 k: Q. z<body> 2 ^& N1 p+ r: L% V( [! g" E
<div id="pic"> - y6 X9 T) G: u' Q, r( h
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ' y5 X, ^% U$ H- M. O7 m% R8 k
</div>
, g) X$ y% O: l. ?</body>
4 g6 B$ s* C" r. }3 S</html> 1 a: G: g! J; c+ ?9 h
4 [6 @  q: j$ q- i' n9 N5 }
百分比适应:+ F! }! [  Q# c$ Y$ q, {9 P6 n
以下是引用片段:' j% [7 V# \/ R, G# Q1 k8 Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ q1 N- h0 T* ^" [  R/ _<html xmlns="http://www.w3.org/1999/xhtml";> 2 i: s4 r, l2 o- w! b$ |3 R& q9 h
<head> 2 N- o- N% a5 f# s
<meta http-equiv="Content-Type" c />
! s9 E/ q+ w% M0 H1 f<title>css2.0 VS ie</title> , g  I/ U9 j) d1 S3 z/ K
<style type="text/css">
' W+ _  P: f' D# V2 B: @" [% k<!--
, Y* i1 R" X  T+ \! Pbody {
3 @5 `, c# L: e& F8 z4 dfont-size: 12px; & L" _4 W6 Y6 L3 W+ F
text-align: center; 9 S8 B: Q' ]( R  [4 Y
margin: 0px; & |# x1 r/ i0 p/ i+ K; \. g  p; j
padding: 0px;
) {+ M% M3 k: i0 c  {6 c3 T  Z}   F5 h2 ~" n% R/ c& F8 i
#pic{
9 f  o' H& J3 J+ w# w8 j) w  margin:0 auto; 1 u: J% _, ?: t% e( g% C
  width:800px;
. D! i9 ^/ J5 P! P  padding:0;
9 I2 m: z# x! f8 S" w+ v5 V& H  border:1px solid #333;
: e( Y/ n; U  t  } . I& A5 ]. e$ v+ q  P$ g
#pic img{ 7 D+ c0 c+ T+ [. R% U0 ]
    max-width:780px;
0 {9 e3 J; O+ o; k+ T( Cwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. n9 w) M6 T% X+ X1 Vborder:1px dashed #000;   e8 c5 r9 ~8 B: f
}
8 @3 `+ I; M1 b-->
* L. {# s4 \  _4 s5 x/ ~0 M* b</style>
6 m; [5 _9 |% o6 ]</head>
0 B' j( |' b  p8 M3 K<body>
8 P% G. k, ?4 W: f7 M. n8 J<div id="pic">
2 E; Q! F2 L9 J0 i% E+ u<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> " J  \# s1 e" I- L9 i
</div> ; K" ?: Z' K# s& T, U" @/ ]7 v
</body>
: b/ ?8 j9 E2 d( q, ]# v</html>




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