Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
3 n4 y- J6 }2 Q关键在于:max-width:780px;以及下面那行。/ c& J& l" {4 h) ], G
固定像素适应:' C+ N; S( \" j1 b2 E( d' o

) W7 J2 x! `6 Z1 O5 u- c2 ?- Xdotted; 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>  以下是引用片段:
) l8 y; z& C8 A$ u<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- N2 R3 [$ y( B7 j0 l<html xmlns="http://www.w3.org/1999/xhtml";> 9 X4 E+ D, d8 h# h- @4 o
<head> " h$ U+ ?4 v" Y+ J5 Z" A; e
<meta http-equiv="Content-Type" c /> . x" I4 a! |& D. L' [5 {( [
<title>css2.0 VS ie</title> / a$ ?' Y4 u. f3 V$ s# L# D
<style type="text/css">
5 ]; r; `; ~  r! U  I<!-- 5 y. \& O- G. O" M' X; s
body {
7 L% r  v. w' I3 Bfont-size: 12px; 3 }' W0 R7 T5 R9 D0 I, G
text-align: center;
8 k5 h4 e5 U* M. R' \margin: 0px; 4 m. \7 Q3 \+ A" I: @2 z
padding: 0px;
- ]6 U( W2 W* D  C# X2 V0 {}
# M2 o, q. q/ Z# E$ l2 R#pic{ ) j4 N5 `9 u) H! {( }
  margin:0 auto;
8 Z& k" l% ~* Z( b, k. ]  width:800px; 2 ^  M6 G6 @/ {9 t: b# [) |
  padding:0; - E+ ~0 @) ^) @& }1 p
  border:1px solid #333;   e9 M+ P, p8 U# V( A
  }
, M, A3 E5 J2 a& Q6 c#pic img{ ; y  V6 G; {. Z4 L% N  y
    max-width:780px;
3 R$ A# f( E' a8 d: D* Kwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); , W9 S$ V# K' [( P8 J
border:1px dashed #000; & q( X, U$ Q4 g" w) z0 F+ u3 \$ ^
}
- P+ W) @! e! i5 n& R0 z* X--> % C/ U" ]: o- x3 k
</style>
' E, H$ W( Q6 Q</head>
4 E* Y* Z. K! H) X% J' z<body>
3 G0 n" f! O4 s  W3 \2 i! K5 A9 F<div id="pic"> ; L+ |' s! n6 r/ H
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
; ]' F' i% P" w) P' f</div>
9 ~+ s: c; F9 `1 J. A: z# o$ j</body> ; t( m7 k" X" D9 J! \4 i6 Y
</html> $ F$ I$ I& P1 ~' j- B( b  C8 \; p
( g% }* M9 R6 m0 |
百分比适应:( d6 B7 F2 G! O( O. Q1 Q# d( \
以下是引用片段:
5 u9 p" [" T$ `( G<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 s2 s& I2 W, L# \/ L4 m<html xmlns="http://www.w3.org/1999/xhtml";> : `4 w$ E0 w3 L- r; b- p
<head> 6 V6 D( I1 n% I4 m  B% ?' |
<meta http-equiv="Content-Type" c />
; H6 j  K3 ^/ S! c& t<title>css2.0 VS ie</title> 2 H5 q. \- b# I$ s; k) Z
<style type="text/css"> ( K+ H. f& M. y1 M8 j( n- X2 D
<!--
' u$ g. i9 p# R' Obody { 8 c/ S/ B( V6 B( K' e
font-size: 12px;
- R$ S( p+ y1 D0 U9 mtext-align: center; : Z' y6 G9 ~: q6 M) t
margin: 0px; 0 V  x6 ~1 j7 \
padding: 0px;
: X+ R" v1 k* n1 q% J4 e3 D} ) l9 w1 U; @: {
#pic{
, N6 ?" Z, G& C' k  margin:0 auto;
2 F! Y( H. e- U: F3 Z  width:800px; ; l6 z, X8 i1 S. v; K
  padding:0; ' @9 ~8 T9 f6 r4 Z/ b8 ^
  border:1px solid #333;
  }) J% `' D6 {" v4 T# b* P; L" T  }
$ j( ]* v  ]0 o1 Y% T3 A+ u- v#pic img{
" x0 T4 {% ]+ |7 v7 ]    max-width:780px; 4 B% q9 k' P" f2 ~/ L! w* e0 A
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- Q' M; ^, k* @- T2 Y$ E4 mborder:1px dashed #000; ' y6 m# _& R  |: c7 F/ h, o  w
} 8 Y& H$ w& I9 X5 b0 ?. k, `
--> 3 Y, D& c# Y$ E0 c
</style>
! P* g0 G) x# D  x</head> + G0 i2 b! S. \  O+ e0 c
<body>
7 z) W- d3 a# ?( T' ~6 R4 Z<div id="pic">
& m8 r" P  d1 ^9 T; i<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
$ m6 d4 }0 F. ~* N- J</div> 5 n9 ]3 l$ @, U4 y- c! B. P7 `
</body> 0 S3 v3 B' S9 o. u' Z9 A  v3 g# y
</html>




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