标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
6 a! S, P/ p# o+ M* _
关键在于：max-width:780px;以及下面那行。
; X+ g. _& F) i M
固定像素适应:
8 B& v/ j) z' R
; l. v3 K7 {! ^
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> 以下是引用片段：
/ d; M5 y. \) L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, Z6 W' N8 j6 f. C+ c7 u
<html xmlns="http://www.w3.org/1999/xhtml";>
2 X/ s, x8 u m" F3 ~
<head>
8 K0 f1 B& ?: J6 p4 D$ K- W
<meta http-equiv="Content-Type" c />
6 z5 o8 K3 }; r
<title>css2.0 VS ie</title>
0 V* D1 j7 ^, {/ R' b: O
<style type="text/css">
4 d3 c9 J8 ?. p* X4 K* U$ X
<!--
1 c# y8 e1 d1 r2 m8 Z
body {
9 y& e% U; b2 l# S% t
font-size: 12px;
! }5 C7 k; ?0 S; W8 ], j& V! d: M" i
text-align: center;
2 d$ f1 s8 K: F$ P' R3 d5 d
margin: 0px;
1 P; }9 e: K4 y6 K) E
padding: 0px;
. z8 j6 s. k! w6 h& ~. E, ?7 `! P
}
' C0 e% z/ |; }6 ], r, F4 Z0 ]
#pic{
$ C9 i( X; E/ u- {( ?; V2 K
margin:0 auto;
2 z3 e$ k/ U8 G# \/ q: p
width:800px;
/ f' \% i/ \- d: g
padding:0;
" d6 q) i. i6 s, r; f# ?
border:1px solid #333;
8 h' h1 \0 r N5 U7 L
}
9 l) \* h6 B. W E
#pic img{
+ n" D: [" [. b) q
max-width:780px;
2 a" @, h( `4 y0 Z3 f
width:expression(document.body.clientWidth > 780? "780px": "auto" );
6 j( z6 h1 A0 p7 ]
border:1px dashed #000;
. s; L- N L( O
}
1 E/ d O5 T8 s* u- J- N6 d) `
-->
7 F# r5 P0 o9 S! ]( |9 x5 I
</style>
* w4 a+ ^+ Q! |% A" j
</head>
4 q: j; e% V5 g
<body>
& Q' s) n- X9 s% |5 j
<div id="pic">
% k' Q1 n: L0 F- j! }% o" ]
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
' a: Y5 }. l2 E _* ~
</div>
$ e7 f3 }. X! T' a
</body>
7 k5 Q& L2 A0 E
</html>
: B3 `- m' B0 y9 t; l3 _( r
5 c( N5 E6 t. q: w/ |3 s7 Y
百分比适应:
( m4 @$ t2 K$ s7 K% K4 P
以下是引用片段：
9 s' ~* Y2 }, P: H1 A. @0 M+ N
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' j9 @( w8 _! }+ g. _+ \
<html xmlns="http://www.w3.org/1999/xhtml";>
8 G, S7 v8 |" Y% f$ P
<head>
0 k: n7 g4 b! u- A$ D) V
<meta http-equiv="Content-Type" c />
* Y$ L* K8 r7 t0 x7 |
<title>css2.0 VS ie</title>
% E H9 R) W1 q
<style type="text/css">
* O# i$ z Z4 A/ r1 o
<!--
& F) a- G7 V) F! J3 I$ K# R
body {
1 T) J( n1 x: _! d0 ?, ~) P2 m
font-size: 12px;
9 W$ o5 m: ]. `0 N+ e8 [. {
text-align: center;
0 m) Z7 p3 |4 Z/ ]. L+ J* s8 O
margin: 0px;
/ v$ E5 G" [, \) L/ b! B7 k
padding: 0px;
6 R. m2 t2 f( I) S! T% Q/ |, m
}
2 y0 Y: t* y" d& f2 k
#pic{
; U9 }+ n* c6 B+ L
margin:0 auto;
. }2 u5 k6 v. F# z6 n
width:800px;
! b" q$ e2 ]' u- S: B
padding:0;
. r2 `# [! s& A
border:1px solid #333;
& Q/ w: d8 ]# R7 u$ |# b$ n4 W6 [
}
4 E6 W$ @! Y C" B' n. A
#pic img{
+ i9 H. I8 a. H& r- f9 b
max-width:780px;
% B+ H; C( y7 \1 n7 |3 Z4 @9 H
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
: B2 }- {/ o) B0 a) H9 m
border:1px dashed #000;
; w5 R4 Q9 g6 x% W3 S: _; N. T
}
7 h# A, X3 v6 _) k W# w1 q' j1 I
-->
. q, }& ^, V) l% V0 A
</style>
( ]1 x3 Y8 M3 X8 v
</head>
- a) Y1 I+ P7 L4 n6 p, z
<body>
2 W5 k- X) \. h2 j, p8 A
<div id="pic">
8 u+ E4 ^$ P9 K, I3 l
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
8 U5 x9 u0 p7 N; P2 g% q, O
</div>
, |$ g: M7 U7 X1 p( ?* S0 a! |, k
</body>
, P& W: a b4 A9 b! |6 W: O8 x
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
