Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
+ t- [# Q) E6 H0 H- e6 Y4 D关键在于:max-width:780px;以及下面那行。
6 M3 ^! z5 V) f# S( f固定像素适应:
0 e7 n) E3 h" S# g4 ?6 R9 g9 o3 u/ w: p. Y
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>  以下是引用片段:
+ M- z7 q3 ~9 i8 e5 e. }<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! C1 j! T4 d" f/ O) O  d1 x<html xmlns="http://www.w3.org/1999/xhtml";> ' B" S, ?! N# l! A/ a
<head>
: [( M6 P2 e  A0 [: g<meta http-equiv="Content-Type" c /> # D4 }+ p9 S2 G! |/ p+ c5 R
<title>css2.0 VS ie</title> $ l8 a9 `, T% P6 K8 Q/ J1 [
<style type="text/css">
# v  _9 o9 c8 O  q0 Q% L1 `<!-- + }  \" Z* F& h7 C
body { # ^# G8 y; O  y$ g
font-size: 12px;
) x7 A3 B9 R: E% Atext-align: center;
8 f$ M, H2 ]* j# a. i0 Tmargin: 0px; : m# t1 P2 `# W6 K) i* d
padding: 0px; 6 \7 ^2 q+ p! g, M
}
( h' `/ m* P/ X; U#pic{   e' ?6 N% O: j6 q/ \) T
  margin:0 auto; 9 l  i* M4 H4 e4 }, ^
  width:800px; & C# y* X" P) @& I3 \
  padding:0;
: y# B9 t+ i3 S4 C  border:1px solid #333;
4 R! A9 J4 e0 i% g9 a; B+ m  }
) C. o$ y8 N3 Q! V& k1 @4 i: ?#pic img{
2 j) r( F/ T/ v2 J  W& {    max-width:780px; 0 _1 z* }$ i" e" C/ s  G8 H
width:expression(document.body.clientWidth > 780? "780px": "auto" );
) j! A3 b4 m+ k) U' Yborder:1px dashed #000; / [3 A% T- H- P/ d( `4 S: v
}
+ ?. G( w" w7 X. {-->
# G5 Y- C! b5 |* O+ ?; ^8 l</style>
+ m) b! ]* Y; @4 I1 o4 W5 S. S</head>
4 x+ i2 R$ x  y& ]$ a! U( p<body> ) M" q1 v/ I7 D( D
<div id="pic"> - G7 l7 Q9 V) o* B
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
% ?. A- g# ]" a</div> ' S; {+ D' E6 x9 a- M# V+ T0 N
</body>
( W; g) ?' y4 m</html> " d; b1 P) \; w# e% F: N1 t

' F  E" g' S- H; }' G5 U百分比适应:- L" _8 c. Y- i( t
以下是引用片段:
9 p+ m0 l! B% b# w4 B9 G<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; a5 P) L1 i( G5 [* E2 e<html xmlns="http://www.w3.org/1999/xhtml";>
$ j* T+ [; @, M* O* S: A<head> 9 [5 D- w! N- ~2 K
<meta http-equiv="Content-Type" c />
$ k- \" o2 h0 X<title>css2.0 VS ie</title> 3 y) A: b- v. s0 B7 f' U/ d0 s, L
<style type="text/css"> - P, a" Y- ^4 Q! I3 n  c1 O: n) u
<!--   N, ^; v# Q' ?/ f* ?2 f9 p
body { - f4 m3 \3 s7 s+ f5 n, s! @8 S
font-size: 12px;
. o6 i. s; T2 V+ l: U% E1 P& Jtext-align: center; 5 d3 q! _& ]4 @1 m$ L9 B  K
margin: 0px; ( A( z# o0 h' h$ Z
padding: 0px;
1 b" C3 y8 [2 b. p}
. C1 S8 N9 c- k" H% h#pic{
  f- s, }) }  c  |1 t' i2 L  margin:0 auto; ) m: X6 R# P. ~. j; M9 ?- b* q
  width:800px;
) S3 |, E  F) R& q/ Y/ x  padding:0; " H- I" d6 S- @' m7 F9 C
  border:1px solid #333;
8 |. u) M& r9 C  } . q" ]; O# _( ~6 \6 g- K
#pic img{ 1 M( T5 B# |6 }. x6 M
    max-width:780px; 8 A2 j6 s- L, Q* @
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- v* `1 t/ B  Gborder:1px dashed #000;
1 E& D: \" H6 S% y6 j, ?( I/ o. c& ]} + H+ @* L+ A& \7 g7 \2 s- {
-->
) _8 o( u0 z9 i9 Q8 d, h</style> " r' N/ i7 e- ]3 o. S( I
</head>
$ m2 {4 Z- C* x' ?# `/ ^2 a& Q<body>
8 @8 Z* }0 @- U! K<div id="pic">
3 [) P1 ?8 F5 i9 u5 @0 `+ x/ ]<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 3 ~" i! J% c" E1 q3 V
</div>
& r& I: f6 d1 c; z& Q' `6 I</body>
! C  t4 r1 `* s  K</html>




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