Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
, F+ I# |& x" g9 p# y& N1 r: N! ^- L+ f# q关键在于:max-width:780px;以及下面那行。
  U+ Y# R1 [1 E4 \2 ?$ o) c固定像素适应:
! ~: [6 E  `8 ~+ X2 D$ K6 U5 V+ L& @( q5 J$ p. Y- p
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>  以下是引用片段:
; s  d1 }& H+ @8 o& y% |4 A<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ w  [+ u+ Z3 B2 N" N<html xmlns="http://www.w3.org/1999/xhtml";>
) U, t9 i: z% {<head> , m( I" |& [: R+ e2 r
<meta http-equiv="Content-Type" c />
2 V8 T& e/ D! D7 l& W% h% n<title>css2.0 VS ie</title> 2 k2 j+ Q, c3 X% f6 e
<style type="text/css">
: P# M& a( [! j, j1 }<!-- 7 W/ j5 v) \1 p: }2 X: T
body { ; n3 b! E1 k# s6 E( N
font-size: 12px;
6 x0 K, o9 s' Q" ~) k% G  ytext-align: center;
; W0 D. q. K  K, ?3 L9 D3 _; z4 Xmargin: 0px; 3 v7 t. ]! [/ H( M
padding: 0px;
# y5 j2 _( c4 Z0 j: }1 P}
8 h# Z; g# k$ V3 D- J+ c#pic{ % K0 O; \7 q' a2 R3 Q/ R0 ~
  margin:0 auto;
+ ~; E( r+ Q3 {9 Z3 H  width:800px;
1 `$ F2 r% @$ \) _- w# R5 r  padding:0; 7 i4 Z/ n% s6 h5 ~8 t( J
  border:1px solid #333; 3 [" {. ~+ p) ~) y, c/ X% G- F3 i
  } : [- H% q$ ~1 H$ m
#pic img{
0 G. y0 a& U6 [- t6 P8 b$ o& y    max-width:780px; 2 U/ |& [: Q( E9 |" ?
width:expression(document.body.clientWidth > 780? "780px": "auto" );
- Z# D3 s5 X! a2 K/ Uborder:1px dashed #000; / \5 t+ @% l$ K, d: Q, a
} 7 c* t% l8 T+ ~* ^: l" P
-->
) O2 @+ }4 B3 f</style>
0 U" M; h# j  I- D</head>
2 S; M) J, h% R# n<body>
8 V/ \5 d. l6 D4 t4 Z5 A<div id="pic"> " w" w+ b5 q) h4 e
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
% J: i0 v: R, f4 D* J</div> ! J9 A% r3 ^5 O* V4 X& W* |* `) g- |
</body> 9 o9 S5 A: D) {# ?# |# Y. |0 V
</html>
" l5 H9 _: X9 Q0 F6 I& `& l# B! `) p" X
百分比适应:
5 B: e4 d: h' ^! ]以下是引用片段:
) ]) _6 h( ]! q* i! [3 S<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' J  Y) F2 F  d) Q; h' Q<html xmlns="http://www.w3.org/1999/xhtml";> ; C  H6 F( r+ j
<head>
* f) \( }' t% \( g$ s<meta http-equiv="Content-Type" c /> 1 E  f! ?. H# [: \1 y/ G
<title>css2.0 VS ie</title>
& E$ e8 T+ R" Z" F<style type="text/css">
* T; I8 L5 p) |1 v8 K<!-- ! M$ _$ z) l$ X7 T
body { % Q) I; }/ e$ M# L& j
font-size: 12px; " }! \5 m$ X( X
text-align: center;
, j6 y$ _* t2 W: Jmargin: 0px; - ]) r: r$ y7 M2 k% c- v
padding: 0px;
/ J' P  G4 |" F& Y. P9 r, i} ' l' W9 i8 M  w& u" Y3 {
#pic{ & ~. F/ u/ M  x
  margin:0 auto; - {/ L1 [' ]: X, Q; P5 r% W4 B
  width:800px;
# {8 ?0 ^% X% n' K  padding:0; ' K; x6 @% H0 g. _1 U4 p
  border:1px solid #333; , |# f3 \3 P3 q( U4 g3 Q
  }
( N  @# }/ Y# q9 p# R. P#pic img{
: o) Q8 S1 [# Q2 U' \; Q    max-width:780px; 8 L5 y6 I, o" P; g
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
1 F5 y% D7 e# i1 ]% x, Mborder:1px dashed #000; " E" N& ]! Z( n6 k+ m
}
# O" ]% J! k: |/ p9 m7 i--> / [5 c# C' V7 h
</style> . K+ H  ]& e  `8 E# v- [
</head>
; J* B) I+ `" R' [: I; O0 ^<body> 6 o2 t& ]& j) S; P3 `- s
<div id="pic"> 4 _7 a+ D# x) j, A+ I
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
+ r2 E" M$ Q1 ~9 B6 z" p0 ]" k# W. H' ]</div> 0 H" x" ?  k9 R5 Y
</body> * u! p0 `- G; H" B% K& s
</html>




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