返回列表 发帖

在DIV下图片自适应的解决方法

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。  P% i" B. }6 O: X% r
关键在于:max-width:780px;以及下面那行。
9 [: d, H6 s0 ^- f$ i; U$ I2 u固定像素适应:
0 V# S% [4 [7 B  e3 A4 x* {. v; n- V. Z. o
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>  以下是引用片段:
, h0 R5 T& k8 B4 t( ^' W<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 2 [) U3 C( P* |) z, e/ S4 P
<html xmlns="http://www.w3.org/1999/xhtml";> 2 r4 v( h' H+ J% _& z  |$ |
<head> ( ]  U! R9 l" S, e" l5 ^5 y2 D
<meta http-equiv="Content-Type" c />
( j  p  z+ b5 K+ k  Y' H6 Y$ ^& m<title>css2.0 VS ie</title> ( m1 L) @0 R6 I; M% }
<style type="text/css">
  h. x  m) X$ w8 g<!-- 9 w# Z3 u; S2 i7 d( }( |: V
body {
- y3 R1 c% i1 l- l& k$ bfont-size: 12px;
! a% b$ V' L! E) ptext-align: center;
/ w/ L- s5 B7 m  ^. Q) q2 Q( Pmargin: 0px; 9 g7 K" ^9 v2 d1 j
padding: 0px;
9 a( k% Q1 z6 p: d% U: R}
/ F/ v4 k6 n- f" E7 S; z2 W+ k#pic{ ; |5 R# Q3 k; C. g4 x: s
  margin:0 auto;
) s& G: d: |+ y" O+ M  width:800px; 1 e: F9 {( o4 k' f  q# F
  padding:0; 2 ^2 w1 e- b$ V& ^9 r3 ^
  border:1px solid #333; : s+ S0 I3 N5 z2 c) v' w
  } 0 M& h" y( Q- a: n# S
#pic img{
& Y5 k. \, F& Q9 I% V    max-width:780px; : s  C8 [% F% k) L/ g, c- ~/ [% N
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 9 c2 d  e* c0 [& T' c' w: c
border:1px dashed #000; / s# L5 U; ^1 U9 S
} 6 N! G( ~8 H* y; w* J6 h) N. H
-->
4 L( I; \4 R7 O, |* C</style> / C! I0 q/ v/ G' w
</head> 5 Q9 g6 }% o4 T- n9 Z+ V0 O
<body> 5 s3 Q0 v9 W$ g9 B5 v: _5 G
<div id="pic">
% Z6 x- m" Q1 T; z<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
" `( K/ ?$ i& D  m</div>
2 K  ~8 B/ d6 {+ f8 t7 b</body>
* b1 K1 V& n9 R2 r, F$ g</html> * c1 C2 f" d  D2 v' H' `
1 R( W9 M; ^7 q+ s
百分比适应:: `3 }8 {& D* O' f' O
以下是引用片段:# o& p7 V+ y  u2 a! R
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: \( Y9 y3 B5 O  g# \9 w5 R4 {4 d<html xmlns="http://www.w3.org/1999/xhtml";>
+ Q6 t0 A1 R6 p0 y<head> 2 r9 H1 P4 w4 \4 w9 {. B
<meta http-equiv="Content-Type" c />
, Q9 S8 \, V( n, Z! @<title>css2.0 VS ie</title> - w' I& h5 Y% O5 g7 ?: h& f, c
<style type="text/css">
/ e9 O. K  x# {$ g/ Q) u2 |<!--
/ d6 ^4 D4 @. D% |. p( S4 Vbody {
( j& i! H" @* n1 dfont-size: 12px; # Y" v# T. {3 j& y5 U
text-align: center; + W5 B% Z5 X! g+ W/ w$ w
margin: 0px; " D. u) a: j" V9 p& Q
padding: 0px;
% t2 U" E6 D  w* `3 X$ ~! P} - c* G4 G+ F5 a9 b
#pic{ . y! C3 E8 y2 |; q) Z1 q
  margin:0 auto;
3 J6 J& M, q3 S$ ^  width:800px;
. z8 C% H, b/ g/ F& B: r) B  padding:0; 2 {4 q; p" |" n# U6 |
  border:1px solid #333; 2 ]0 J0 {# Z, I
  }
% w7 m: D; m2 p7 u4 u0 L#pic img{
/ p8 j. p+ l: D% l+ w    max-width:780px; 4 Q& T( M0 j; Z4 Q: H3 Y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 8 p: H, j! |5 m5 Y9 s
border:1px dashed #000;
& B, W/ H+ r- ?3 q}
' B$ \% u7 v- E1 V. Q4 }, x8 h8 I-->
: j! v  X( `" p, q</style>
9 t/ [4 U- Q: U* G. n</head>
- Y7 _% |2 L* T6 M3 b8 F<body>
4 r% F7 m8 {9 C* f5 X<div id="pic">
4 ^- F1 g9 A1 t$ m% a, z<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
$ B# C) c/ i$ _$ P</div>
  \) d* b, y5 X9 p: C</body> % n: p' B: t* s& W1 O! f
</html>

返回列表
【捌玖网络】已经运行: