标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
$ |6 _0 N1 O, E8 X
关键在于：max-width:780px;以及下面那行。
, K) { j$ K: M( I. J N
固定像素适应:
( T; C$ K& d6 q' K
1 s8 L% N3 }% v
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> 以下是引用片段：
+ b/ H1 U( M r8 b7 \
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: b4 C9 V2 e/ `/ h* C
<html xmlns="http://www.w3.org/1999/xhtml";>
; C0 F5 B o& z9 ?% [3 e& C% e( S
<head>
) u) B% s3 X% H6 \& f
<meta http-equiv="Content-Type" c />
% k8 f% p6 l0 V
<title>css2.0 VS ie</title>
& M! j+ o7 b0 i8 P/ M: T! _1 I
<style type="text/css">
" _0 f% H, a: B
<!--
: f5 N0 J5 j/ I) h1 P# _
body {
: h9 N8 V3 V& K
font-size: 12px;
1 j0 [% F* G+ m& _# q2 \
text-align: center;
5 [2 G) F0 n% d# O; E9 x2 f
margin: 0px;
6 C7 _: j5 [- c* Y: i% E: t
padding: 0px;
1 C* K7 ~& P2 n$ t# c
}
6 Z9 Z* Q: Z) B# D
#pic{
2 Z+ c! v/ C7 p* q
margin:0 auto;
9 C3 ]" g' ^0 M+ T; u) o; C
width:800px;
) f. U* l/ `' O
padding:0;
+ p) m! R' P/ c4 O; K
border:1px solid #333;
8 k- u1 d9 L- }
}
: x. Y$ v, y2 c9 _8 K/ I/ ]3 S
#pic img{
$ y5 O1 g& d( r! F
max-width:780px;
, v/ Z5 \2 c* x7 M$ K2 t0 l3 s4 n
width:expression(document.body.clientWidth > 780? "780px": "auto" );
/ Q s2 R: C5 K7 c) X. x
border:1px dashed #000;
( j% N8 s# Q% f7 `6 e
}
$ D! b# g! d- Z; c* q( Q
-->
9 n8 W: H9 |3 l4 e& t) C
</style>
" s1 O% d7 e3 M- n s
</head>
; W, X& ]/ E, u4 U
<body>
2 i) ~9 l' \& R) Y+ G
<div id="pic">
M9 l# [( R& L d7 @' V
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
! R1 b% D- w e, W/ b" S
</div>
) l4 V( o( I% l1 u) D6 N
</body>
5 Z; E4 N3 Y% J# R' U1 W
</html>
, T4 {9 C' Y, {( \! N
$ Y. s6 ^6 R9 U$ R2 j1 y) s; m
百分比适应:
4 w6 M+ J' o8 s: P1 ?6 A
以下是引用片段：
. B2 [& }' `. w, {! j9 R( V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' j" t" o& @, s" a
<html xmlns="http://www.w3.org/1999/xhtml";>
: `* R' E d1 A( X7 X% @
<head>
6 k/ k) @( R4 R0 u/ s5 ^
<meta http-equiv="Content-Type" c />
5 y' Q) }1 M4 W0 ^* S ]
<title>css2.0 VS ie</title>
" [* L3 A p' p" G
<style type="text/css">
1 d2 a- f1 w/ [0 D
<!--
- I. B+ ^ o8 a7 J6 y4 Y
body {
; J6 a" ?0 D+ |' \9 n. h. T
font-size: 12px;
. f: f3 e; w7 f0 j! S6 M# h* h" @
text-align: center;
7 M; M6 d% E2 q. k& |* I* x
margin: 0px;
. D* @+ \) q( O% D* e1 b: y0 x$ P
padding: 0px;
$ e) H6 T: F! m. b+ b
}
4 y( E. ~: p/ {( E, p) m
#pic{
) Q6 x) K6 X! V* ^. @8 H+ [5 O
margin:0 auto;
8 \( j# K8 }; z; z3 W( g8 B0 \
width:800px;
, s" L# ?0 ~- N! r& k; t
padding:0;
z0 P. z, |* V9 U
border:1px solid #333;
. k' n7 Q% {" r0 {
}
2 N3 ]) j9 z" {2 _7 a2 Q- C
#pic img{
+ m v, y% o& U$ i! C% t
max-width:780px;
( A" ]8 |& p4 g+ E' x; q4 A8 H
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. L/ x% ~" e; J; G; M, G4 @
border:1px dashed #000;
" q9 d9 |) @* H' g4 E0 h" s; P. h
}
, S I8 _ K7 j5 h* u: x
-->
( P4 @/ w3 c6 `0 S
</style>
) P9 Z* Z3 t0 U/ d+ p) N
</head>
3 K* L* h9 ?) _: p) @) n1 G
<body>
% J) S) ^3 K, |. q
<div id="pic">
' g1 Y$ m4 k7 R. ?, b. [
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
6 r: l( d A* [6 V9 Y
</div>
0 C% Q5 {/ }% U2 J
</body>
4 A. [# m2 F# _3 A
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
