标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 H; J( O5 I: B$ l
关键在于：max-width:780px;以及下面那行。
- X. i3 c$ B, n4 }2 T. u$ f o
固定像素适应:
7 h6 l( G) ]8 b8 V
1 [$ A9 `4 V* H- \8 I" s* ~6 b+ W5 H
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> 以下是引用片段：
% [, o4 r$ D9 o6 ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- c4 W3 p& I7 q W/ B; D* u) r0 I
<html xmlns="http://www.w3.org/1999/xhtml";>
( u/ ~' t; B/ z
<head>
" a4 k2 t: g8 W& U6 d1 u, G
<meta http-equiv="Content-Type" c />
) O9 m; G/ l$ I- Q2 M
<title>css2.0 VS ie</title>
$ A& p, v" ~" k7 E" s
<style type="text/css">
( Y) A: w' K& c2 {4 b8 Y/ {3 i
<!--
; |' N1 ^7 C7 Q* R
body {
# ~ |& f: U8 C' d1 q# h! r
font-size: 12px;
8 I$ o7 b! \" ^9 y, ^: f: D8 v
text-align: center;
2 U$ e' w+ B* ~: r* K
margin: 0px;
. o9 w$ Y% L' g, \$ k. h
padding: 0px;
/ F5 U5 A- b# i3 E% N; M/ B
}
% J. E9 u5 ~" F- L3 K
#pic{
' i% c' R. M/ S7 \, r# k
margin:0 auto;
) m; S: G4 b+ P! ~+ E, U3 m
width:800px;
! K3 \% z, v$ G8 ]* `
padding:0;
+ @- X# x t8 W+ I( j% W( g
border:1px solid #333;
: {) ?4 G' X, X" v
}
6 [7 A6 ~ v5 e( O- B& |
#pic img{
$ @; q9 m2 n' H6 a
max-width:780px;
& V5 q, x7 M! z$ a6 l/ _
width:expression(document.body.clientWidth > 780? "780px": "auto" );
/ l5 J) k+ E' |( z9 x4 @ T
border:1px dashed #000;
H5 G1 ^ |( }
}
8 ^, y$ y( r% r# o u: T
-->
0 d H4 i" P: @
</style>
! E8 \9 Q3 f! l( j- {5 u
</head>
* g4 e; v6 ]! [8 j% p
<body>
9 F3 A( c+ ]7 D% r& N& x% X9 R. ^
<div id="pic">
8 V1 j' \7 {. H [0 k- T
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
% O* E) X- ~, O* q9 d; l5 R2 |
</div>
. [; `( }! O) F- F
</body>
+ D7 ~7 k& v$ }
</html>
9 T! U$ c+ g5 i% c! R9 R4 k
1 m5 z3 S/ `& d0 W- d9 K$ Y' X
百分比适应:
: R2 Y" z$ D, y: @9 C+ l
以下是引用片段：
0 m& A3 b3 X7 N1 i+ w1 Y; k* {" |/ ^* u2 J
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 ~& E, R. s- I4 e% ?1 s
<html xmlns="http://www.w3.org/1999/xhtml";>
}7 j% k5 x) \9 i- ~3 E
<head>
( }( L. p7 K1 Q7 _/ Z
<meta http-equiv="Content-Type" c />
$ i0 d, w( q4 C- j# F4 K
<title>css2.0 VS ie</title>
+ ~& `' C/ {' e; w! X- b4 `
<style type="text/css">
: s9 h9 @4 c2 H- L1 o# F
<!--
, I+ ^$ @" }/ h4 @1 |6 s9 L. j
body {
# a8 K: [, D( @$ o+ {
font-size: 12px;
, ] w* f5 q6 S D ?. i0 e
text-align: center;
. Z1 j3 ~4 [! O `4 F$ p
margin: 0px;
( A2 ]/ E) P$ q4 E1 v8 o
padding: 0px;
9 e' n9 @3 g) Y7 S `
}
: O! L3 ~& u# p& z7 m
#pic{
1 \; _# \. f9 X6 Q, O2 E5 ~2 g0 D
margin:0 auto;
: s+ Q. O' w: o- W: {
width:800px;
' n2 ]* w$ z# i) H& e x0 x
padding:0;
. |) S: }$ F P! @$ T ?
border:1px solid #333;
$ ^/ _. ^/ s% k/ P4 Y, J. _
}
1 u/ D, r# B: h2 R
#pic img{
+ d4 |1 C5 V% }
max-width:780px;
7 d7 ?0 E, K$ z* Q9 j' @. H% O
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, ]9 ?8 a7 \" Z' j1 t* Q
border:1px dashed #000;
6 D6 M. v. S7 r+ n: ~: E, j$ {
}
8 r; d2 X, \! z2 N7 a* k
-->
; _/ x( L t( \; J4 w T. h
</style>
/ U7 ?( q! p; I
</head>
$ k" {" I3 R! i. \% f: u- E1 U0 j
<body>
, R. \: t7 m- ~" H
<div id="pic">
; ~* F5 _: D' R. l" w+ H
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
* r8 V) }# |0 s3 H3 Y M( h
</div>
, ~: _+ m7 V" `0 h( ^* T9 s: f6 P
</body>
6 _0 d& l, |% w, ]: \! A
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
