标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
) v# [, b0 T3 L7 g1 ~( \( I/ h
关键在于：max-width:780px;以及下面那行。
- u1 h1 S0 t- @3 C
固定像素适应:
) Y/ F8 U( K! i( z6 B
: T3 D Y% q# k, ~$ X9 z; ~4 }
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> 以下是引用片段：
5 T. v. n5 g3 P8 A! u9 `) t
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 y0 p7 z/ \1 B6 g* I% \5 ~) S/ F
<html xmlns="http://www.w3.org/1999/xhtml";>
( Z6 A0 {. J) h5 u2 H0 R
<head>
3 K: W+ V" A8 s0 s2 P- u, Z: s
<meta http-equiv="Content-Type" c />
A6 a# |1 e+ z( u4 M9 W3 a* Q6 i# J
<title>css2.0 VS ie</title>
: p1 S' |# u& G0 J5 {# q
<style type="text/css">
! j7 O- a( G3 b8 h6 J
<!--
7 F2 U. c" P# u6 J
body {
9 r) c2 ^- @) R* d" E6 b/ |% i
font-size: 12px;
# D1 g) r7 p$ K4 x2 ?
text-align: center;
" b: e% l. M i/ P/ F4 T
margin: 0px;
: q. y- F R& L* j$ S, m, A, s
padding: 0px;
. D# A; z9 ?' E% s$ B% p7 c
}
* U# |9 P) X2 N7 f
#pic{
U; z9 p# l; ]: g6 h
margin:0 auto;
8 q3 @5 ?5 t% G8 L
width:800px;
+ ?5 y V2 b- }
padding:0;
- F: D* W& {8 O
border:1px solid #333;
% F' N7 g% q, s4 x% v
}
# V3 r8 ]5 B( f% E. N' Q
#pic img{
. X) J3 r+ R) n% w4 l! v' ?. p
max-width:780px;
& G/ n' d- @+ r: f; g
width:expression(document.body.clientWidth > 780? "780px": "auto" );
) ~: _# `* D- W; h+ N2 t- Y
border:1px dashed #000;
0 Y& `: q4 j$ L
}
+ E' g% v! {, M5 {
-->
4 E& z1 R) h, Q( G+ H6 q
</style>
X* g8 V: n4 m7 H
</head>
0 |* o9 S3 Z: A4 w* ]
<body>
& ~0 z: E0 B* A' P4 J
<div id="pic">
2 u0 i% l7 J. i5 ]* ^$ M5 t1 n
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
1 _/ w* Z, m4 D1 Y$ v. E! q' B4 K
</div>
# B+ Q7 N0 J8 P J
</body>
# H q/ C, }" P+ a! @+ L1 [
</html>
1 I' H" U5 A& e. m, ^" G
4 o: \& i, ~* \' Y& O& t
百分比适应:
, ]7 e2 J* \' M) \8 @5 l
以下是引用片段：
* R$ s) j8 ~! H- h. | }6 \" ~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; @, |2 U+ g2 B& F- K: {
<html xmlns="http://www.w3.org/1999/xhtml";>
5 |) c2 w! Q* V; H; ?
<head>
# y$ w4 `$ i9 U7 ~! h
<meta http-equiv="Content-Type" c />
f7 L4 F4 U: c, }
<title>css2.0 VS ie</title>
- b; K) C" H7 ]( f7 t' x
<style type="text/css">
0 d1 y+ O" |$ R) r% K" n
<!--
' @+ p3 h2 R* k" W" Y
body {
# Z' f4 u7 x8 x( t3 d
font-size: 12px;
" u; P: l6 b" ~3 S) ^( V
text-align: center;
$ v" x" ]9 U0 B0 ^7 Y) t. l
margin: 0px;
3 T& Y+ K$ ~. ~, ^& a0 P
padding: 0px;
3 q w& c, {, ]1 ~% h: e
}
8 M% M: {+ M2 j' V
#pic{
. i1 r* ^$ T' B: `: |4 q* R) `$ W
margin:0 auto;
) e! t! z3 P [- Q
width:800px;
+ y, U9 {9 R! ~& ^* G, o- Q* ^
padding:0;
& [& g! Y- w- e0 g9 R3 R
border:1px solid #333;
# j9 d# ?- {- H5 ?8 V
}
- o0 E ^4 v' G# \( h- X+ n
#pic img{
" ]/ S# w+ h" N a5 Q. k
max-width:780px;
2 e3 q. @! }; d, k# @! F
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
: N' h" T# p: E- |
border:1px dashed #000;
2 A* G: C& a& B9 O) r- e: }7 Q8 h
}
( {- v2 E. P& }: \
-->
1 }9 Z3 Y' k9 o( l
</style>
0 q# S* } o3 c X
</head>
) `! T* y4 Y* L; N1 S6 x; y
<body>
4 R! E8 r t' L+ Z/ l
<div id="pic">
$ ?* C/ i( E N" l. u* q( T
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
V+ j4 J3 B0 G. T; q
</div>
/ M0 I0 B7 V! }$ i% Z8 g" p) ?" K- u, A G
</body>
/ V3 y+ K! \$ T: ?" L; U' N
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
