Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
- ?; A5 ^4 U' P# S  Q  l关键在于:max-width:780px;以及下面那行。8 Y( q1 E' d3 W7 T( b; @' ]& b, [/ h
固定像素适应:
# q) ]& S3 Q: `3 N! K/ o$ Z/ M
; _$ G" O9 Y# h3 H' Z3 q1 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>  以下是引用片段:
& X5 `% g+ w3 j3 t5 ~+ x<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 4 Y8 H7 m; q% p* v
<html xmlns="http://www.w3.org/1999/xhtml";>
* r+ K  w& {) E2 c$ b1 F" `( A<head>
+ @8 G) u& f) E! B+ `<meta http-equiv="Content-Type" c /> ' |; B. X* m+ \/ K
<title>css2.0 VS ie</title>
  s6 T8 I7 P/ U% R$ S' m& j" L, a<style type="text/css">
4 K: J' f1 M* v* N% k8 e1 u<!--
6 C# k+ @, z3 nbody {
9 O2 b7 H  Q2 A& B/ |font-size: 12px;
/ I; `1 ~1 k4 G& Atext-align: center; ) f5 [" i4 U+ U& u: O
margin: 0px; 6 m+ l& k- L( T9 Q6 v2 E  k
padding: 0px;
' s; ]4 C- W4 i+ [  X- r! S0 y}
* D! G6 Q( h9 I2 @. W7 V3 q#pic{
: n3 J0 w) d& a! v+ Y% \3 c. E  margin:0 auto;
' B. W9 x3 S! y, x" t( l  width:800px; 8 M2 @- m9 ?# Q8 @0 }
  padding:0; / \2 |4 s) `7 o/ y7 p( d6 @: `
  border:1px solid #333; 5 t+ F$ R: y4 H2 V0 C- q( a
  } 3 C3 b" g# u: i- {
#pic img{
4 x! {7 E! I% r$ O' A" ^    max-width:780px;
* l0 m  ?( X$ \) pwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 6 O: |9 _0 G6 y: _% R: \( g7 g
border:1px dashed #000;
4 v2 |  E* w+ C5 @" p}
0 e; H# F6 X- h7 ?; f-->
+ z7 A/ Z' M$ y- p9 K</style> 1 A  C# H* ^' G) r- Y' n+ h
</head> * ^7 }& N2 [/ T% o
<body>
* h. A$ \: l5 o" O7 p<div id="pic">
" `9 B. D9 ^* K4 b7 E<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
) \/ n+ g, U$ Q5 ~. m% B. f# s</div> % [( `9 @9 ]7 ]# L/ M, j
</body>
# f* M' @6 K: O. y</html>
; c% b3 t; f6 A% G& o& ^* X
; {8 E: H* l6 z% r! L- _百分比适应:
% |" X# R5 h/ g1 {  V! b* D以下是引用片段:
3 b& R5 S3 P; h1 }9 k<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 H: j, W- o) p0 c) q<html xmlns="http://www.w3.org/1999/xhtml";> " r/ [5 F3 H6 J% M* t5 [$ K3 K
<head> 3 A3 s% f0 I9 {, \% M$ T3 u
<meta http-equiv="Content-Type" c /> . h- b: u- H; P8 b+ @
<title>css2.0 VS ie</title>
  N6 U4 v! }) ?" T& Q5 j+ _<style type="text/css">
# ~, ~9 O9 v( X! Y) R" X& W: w: r<!-- 4 W2 A' ^2 e2 z0 m. ?/ K% i( M
body { % S$ W7 X; H! Y" _2 F, K! N
font-size: 12px; $ k6 `" f3 L$ g1 M) e( w7 f: C
text-align: center;
. ~1 l$ w1 I2 imargin: 0px;
& Z3 F& i7 l, F9 b! j' Lpadding: 0px; ) P4 o7 H# R6 Q9 r( [9 V
}
0 Z# I! G6 y3 X. ^" V3 l2 X#pic{
& ~1 o- l! h7 M9 g1 d  margin:0 auto; ' a" u* v7 S) {" V  Y
  width:800px; 4 p9 m. u/ @; I( a+ G1 V5 E* D
  padding:0; . H3 {# S9 S9 d. I0 I
  border:1px solid #333;
2 Y; z( m: W4 ^2 R1 F& q  }
1 o4 F- k, t6 s! T$ K#pic img{ - F% I% h1 A0 \; w  m" f
    max-width:780px;
7 l1 F  `' h* h0 c! }% Dwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
% ]( U+ p% \+ m9 p9 ^border:1px dashed #000; ) x8 x; s4 u- T' n. {& K% R
}
+ K# G8 \# {; k0 v1 ^* V, B( I-->
# u7 g5 d1 q7 z% ]. }</style> + T' q$ T9 N6 s* R
</head> + D4 q9 B* Y7 y$ S3 r+ c
<body>   ~2 d& p$ P  J# m6 V* K. \
<div id="pic">
0 Q8 k3 I# q$ [6 n' m<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
  `1 ^" f  v7 P</div> * M7 \3 ~# `7 f3 t* M; w
</body>
# G( ]5 j7 z5 J9 ?1 j' Y3 t</html>




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