Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: f+ L. K, R  B2 F关键在于:max-width:780px;以及下面那行。6 n1 v* |: B( \+ H4 S% _6 m
固定像素适应:
- k: W& L: d& {
0 w6 h4 j6 N% i7 |% A- Zdotted; 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>  以下是引用片段:: G7 G; R6 b  J
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 8 U, x! K+ j) I& E" O2 O
<html xmlns="http://www.w3.org/1999/xhtml";> 8 `$ F' {* i0 B: d
<head> ; T9 x+ y! z- I6 O) I
<meta http-equiv="Content-Type" c />
; t" b5 R2 t* m7 K<title>css2.0 VS ie</title>
3 _4 B6 E; R3 S9 }5 t% u, k<style type="text/css"> ; H8 f; U9 ]7 f# [. R
<!-- & D0 u" c2 d( E) R4 ^7 N
body {
. d( D9 w& \! X" f6 }( Jfont-size: 12px;
7 d# V; x- E& n6 e6 y5 W$ M7 S$ [! ^text-align: center;
3 ~  p3 F9 W% s7 m" B9 [% Imargin: 0px;
; ~8 G7 o6 o8 \* U7 T0 h/ ]+ c* ypadding: 0px;
" I0 b$ n! N3 k# u! A} ( S6 f5 o) s" G
#pic{ 4 Q9 y/ [& J6 M% H4 {( F5 l
  margin:0 auto;
1 `6 @4 g) v9 a) |6 s  r  width:800px; 6 k6 W. t. x" O- {$ E- H! i& N  Z/ W, v
  padding:0; 3 e2 ^$ i8 |  S, z4 Y
  border:1px solid #333; 1 n& K' u# m' ^
  } " R9 l/ Y1 Z  b- r) V
#pic img{
4 y, k2 T, V7 p4 Y7 e5 d1 w    max-width:780px;   D. m+ }, U' g" {, P6 Z6 V8 l
width:expression(document.body.clientWidth > 780? "780px": "auto" );
" f6 r6 r2 r8 c! I/ Bborder:1px dashed #000;
! q: M, T! I  c. \- E}
0 x4 {% S5 R. y6 Z+ d5 @-->
9 s* ~2 ~5 ]- F, L; e& N6 r0 w; R</style> 2 J: C' Z: J/ w" p2 j; ?
</head>
0 m5 a; M5 o! g( w7 w<body> 7 L9 `' w1 t8 t  {4 ?, x
<div id="pic">
: y2 g/ i0 R# N1 f) ?# U" ~* Q<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
. p# C8 V. v8 w- {</div> # l: Z/ b0 h2 u; A3 t- ]$ J% @
</body> 4 A$ H! z8 S% s+ w5 I( b, O
</html> 7 C; K* s  p" @$ b" t
8 \0 q6 @# G* D9 m" Z/ x: I
百分比适应:
- s! ?+ G9 B' i0 c/ q以下是引用片段:
1 t0 {/ _. ~+ n1 k- q: `2 E<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 h% i' q, Z9 j& E$ V0 a<html xmlns="http://www.w3.org/1999/xhtml";>
  V. e. x! b+ v- I; g<head> ( Z7 n% c6 c/ m3 `- q1 A! m
<meta http-equiv="Content-Type" c /> + l+ Z4 G' b/ l3 Z; U$ F7 k. {
<title>css2.0 VS ie</title>
& a: I; v& ]$ ^<style type="text/css"> 0 I4 \' s8 q/ L3 T& S
<!--
8 v0 g) X8 Z0 h3 F. lbody { 4 ~/ n! `# |- ]0 P
font-size: 12px;
- r" k! c( Q) p% ptext-align: center;
* y: k9 G& }3 j" C9 {! Hmargin: 0px; 1 M$ u5 o, v# s: h
padding: 0px; 8 ?& O4 k7 o4 q% I" \6 m* m. Z/ o- K/ ~
}
% `. h$ S: z' K* @5 i3 A0 @8 X#pic{
% G2 M4 T' y2 M. h: Y6 [( u5 d) K  margin:0 auto; , t0 s! t/ j9 V+ v$ {: `
  width:800px;   s+ e. |9 q/ G
  padding:0;
, P+ h* P- j/ i& ^4 ?. V  border:1px solid #333;
0 J+ `& w  `/ U+ j. Q  }
/ c  W5 L! ^; l+ G7 ?9 }, b#pic img{ / j/ p5 K# T6 A/ ]. J
    max-width:780px;
) l9 ]1 ?$ @6 Z: l, e9 Mwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 8 v& S! J0 P) e" k5 T, [
border:1px dashed #000;   D& ]: X* _, u6 x* ]& R
} $ m1 z) C- {9 z& S5 U0 l$ }$ }9 C
--> ( b5 d& B- h0 Y# P7 m9 ?
</style> 7 E+ |# L& ^  r
</head>
' y+ ?7 [. l: b! t0 F3 B<body> % |* m! [, T; @
<div id="pic">
( j& f! B* F' [* C6 A$ c. t<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
  g, ?) z2 ~# I</div>
1 e6 _8 L/ ]8 A; Q6 w( o; d</body> , p' _1 m! G0 I) _# K( P& g  \
</html>




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