Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。3 I! Y8 {* U6 H2 w# v
关键在于:max-width:780px;以及下面那行。9 a0 D" ?! z9 [7 e7 |, O" V' t$ W
固定像素适应:
* O6 B+ ]3 S/ G3 y7 F
- g1 R4 M4 f) `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>  以下是引用片段:& q* c  ]' q% p2 _
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ Z! U1 D/ o/ Z; k: I<html xmlns="http://www.w3.org/1999/xhtml";>
7 U6 o5 g2 ^$ k3 P# \) N<head> ; X0 W2 A: a" P0 n
<meta http-equiv="Content-Type" c /> / z7 {; |! ~- j" D1 a5 P' C9 _0 U
<title>css2.0 VS ie</title> ' @! U! U) V. n& E
<style type="text/css"> 0 G8 Z8 G+ S& m' p
<!-- 5 D, e5 _( R# b2 E' h9 D
body { # B  |# g1 k' e$ N
font-size: 12px;
5 u% t+ K3 c& T) Y6 B0 {/ v. J: ~text-align: center;
; [: f8 G) S/ M( N. x- K: S" W2 ?margin: 0px;
1 E. m2 v$ O" @padding: 0px; 1 |3 m0 V/ J& }' t: @  z
}
6 @+ Z) Q: z. q7 z1 I( L, s% f#pic{
( V. L' V. d: s. m  margin:0 auto;
: B1 h8 r% T. u- m4 g  width:800px; ( W4 Z6 ^4 O4 b) b' {4 R  u( x
  padding:0;
7 t; F. Y, y" T$ z  border:1px solid #333;
5 \7 J% [* g% T4 D9 ^: l* G  } 8 P, E8 |; g7 ^: t
#pic img{
& v( ]7 @. W, L" Z3 V    max-width:780px; ) n4 `8 o5 o! p
width:expression(document.body.clientWidth > 780? "780px": "auto" );
4 T0 k2 c* ~7 l& m- ]- f+ K( X1 qborder:1px dashed #000;
0 t& p! C5 }! P, S1 X4 q: O3 D}
! M- E& j( G+ V7 ]# Y4 J, O+ N6 ~--> & R" F- L8 o9 o& Y
</style>
0 c6 n2 F, r- I* q" W</head> ( [5 I1 P- l$ ]! A
<body> 1 l( l* Z6 y  {  Y. v1 R
<div id="pic"> - [& l; }% b& Q4 Y8 g% X4 g
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
8 J0 c1 T4 p5 ]# Y  \" I$ L, @</div>
: d" [6 F7 a! e8 G- n- h. C  |</body> # f! E) s) M4 |* U
</html> $ y# i8 s" N2 Z$ e$ Y

) j% Z8 f) c( Y6 k: r! X百分比适应:: y7 \( F; L2 K
以下是引用片段:8 F# v5 Q1 K( }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 i. [: J% {' M3 d. G$ L# M<html xmlns="http://www.w3.org/1999/xhtml";>
, |# S7 z: o& G' Z# x! E<head>
/ p! {) i( U, O: o- o7 r5 O; m- N, {2 `<meta http-equiv="Content-Type" c /> 3 R% K! b3 r% o) f
<title>css2.0 VS ie</title>
4 s+ D6 v& Q( J* _1 t) y  q<style type="text/css">
% b) h3 P9 ?( r: }; L<!-- ; n3 p/ m! {5 a6 T( m/ F
body { # w( G2 T. B! }; m. S
font-size: 12px;
) g$ q7 G+ }  E( m+ K( g" u  btext-align: center; : a0 H5 G1 }$ W: z, y0 g
margin: 0px;
; {- A4 k% \* p# Wpadding: 0px;
: K$ v! b5 Z* C0 x( J) R}
5 v9 F  M) d0 l5 T/ e0 _  S$ T#pic{ 9 R) d: c! Y7 s6 s  K
  margin:0 auto; : \" K. p6 ]# A
  width:800px; 0 h% a' g# K- ~+ _  f# z/ Q- h
  padding:0;   V, y2 A+ N$ R$ v. {# s* F/ z
  border:1px solid #333;
; s- ~; f/ l0 D% o8 c2 n, K  } - s: Q* f. F# x0 O- o; c
#pic img{
2 ?4 l- e) b, d9 c1 [5 `* q    max-width:780px; + T% D( C3 A9 G6 o/ e7 m
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
( H# ]' u, r9 }* L% w- Aborder:1px dashed #000;
1 @$ B# D4 f$ I, v* ^" X. t6 X* v( J}
1 l7 {$ L7 Z. _; y" E3 D7 G-->
7 U# d3 Y8 D# F9 O3 `$ V</style>
* ^% ]6 u& m! S</head>
' V- _! G& C; k* v8 u<body>   K0 _) A8 u! _$ [: ^0 c& V* Z9 X
<div id="pic"> , Z: r8 \5 J( s: T+ ~) c3 P
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
( u6 h: M: b% P8 }& G</div>
+ d3 d5 F& W" @( U& F$ E; _4 [3 n</body>
3 t4 h% p- |0 t0 m, |, v</html>




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