标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
; I I% q9 M" |
关键在于：max-width:780px;以及下面那行。
) H7 e1 L% u8 y0 Z% M
固定像素适应:
( M* L! R# u8 X7 Y. k" ~. C
9 I j9 ?5 B# C# F
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> 以下是引用片段：
% @+ L! g$ O9 y5 V# g. s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 ]3 }+ e& A; H# ]4 S5 t
<html xmlns="http://www.w3.org/1999/xhtml";>
! o/ c) W; ]- m2 H# p
<head>
* ^0 K1 g+ V n2 [2 ^3 Q
<meta http-equiv="Content-Type" c />
% ~. ^3 q# N2 [ r u7 t
<title>css2.0 VS ie</title>
# E! D$ Q! w* N$ E% x+ G5 K+ ^
<style type="text/css">
7 m e0 A: {# D. h
<!--
7 [8 H1 {6 N8 o
body {
" e) Q# T. l3 s- S3 X4 o
font-size: 12px;
7 Z8 S) ^2 R# Q
text-align: center;
4 K; Q9 D8 f! o
margin: 0px;
) ^$ K( l& L2 g: W- t1 Q$ a
padding: 0px;
6 q8 @; @4 [: c: z+ U. W" H: I3 | q
}
0 O2 H' Q- ]! c3 [& `# m( H
#pic{
# X, Y7 U0 t, y
margin:0 auto;
+ u) k% K1 w. S2 {
width:800px;
9 S6 C! Q2 X4 n% v
padding:0;
/ R' g. |0 F! d% w: x, g. n
border:1px solid #333;
; W4 Y) s! _* J9 r+ G; r+ F+ r
}
! J5 v: ^& ^. z4 _. z, a
#pic img{
5 L: V% I$ ^, y
max-width:780px;
% d- W- m+ L( S E- L
width:expression(document.body.clientWidth > 780? "780px": "auto" );
4 T C" }, \. `1 v" j
border:1px dashed #000;
/ e7 P4 a, j0 s1 v% }/ m% F: x4 a
}
( L0 e& F( N- b- L' k% a0 r
-->
9 B9 v: U2 l z0 o/ `
</style>
" P# C4 N5 d( } P9 ^( |
</head>
# g1 B" @* F6 |
<body>
2 A! s* g8 ^- k
<div id="pic">
' r2 }: Z/ c5 b0 u( W" h4 H$ ?& p
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
4 J6 P' W' ]; Z1 J. y$ p' n. @
</div>
2 c3 v% g: N0 B$ i
</body>
# I. G2 k. u- n6 D
</html>
' U8 q+ N3 ]& M" [3 N: q
x6 Y3 Y% k% y1 W2 Z3 b! ]3 Z
百分比适应:
3 I8 A- }. D- t2 f I3 ~4 T" z
以下是引用片段：
( n+ i" t6 y5 X% N+ T
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
f. G1 N0 c: O" W5 v$ `) _
<html xmlns="http://www.w3.org/1999/xhtml";>
7 M* L, o" h# o$ {* ~( t* @- T! F# z6 G
<head>
: m0 D m- P: g: `
<meta http-equiv="Content-Type" c />
, l' \& S! @& P# R8 E; x' T
<title>css2.0 VS ie</title>
+ w" X1 ]( G3 P" ~) |+ J
<style type="text/css">
# \ v8 L& b& J: q
<!--
4 E5 o2 e! T" q4 s7 h4 @
body {
/ ` L* Q9 V( z9 e. s; Q
font-size: 12px;
: F4 {/ L# H' E% O2 f2 T1 J
text-align: center;
& V7 C N d1 h0 @8 X" G
margin: 0px;
8 B) O7 q8 s% t, ~/ `* j6 [7 M
padding: 0px;
& e- h/ o/ }, x! _) e3 U1 b/ H
}
; [( l4 K1 |4 Q; v0 e+ X7 G0 j
#pic{
! w7 m( L' i6 X" P
margin:0 auto;
5 ^& I. }) ?. N2 g1 I- e
width:800px;
( C/ }* x- Q4 @( @, `) w) j
padding:0;
3 ^$ r. X. t0 J8 G
border:1px solid #333;
6 ^4 S7 o3 {4 h) r# F; h2 [5 `
}
0 i8 C: P3 ^; U
#pic img{
3 E. z& V* \7 m# G y$ d
max-width:780px;
4 ~9 P& Q, O( Q) M
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
7 V9 h) p% e |8 ^- {: f' m1 I
border:1px dashed #000;
. q7 y, B, Y: V- i. }
}
* p8 F5 p; L# _" B$ r
-->
5 @% ]/ t- p0 R+ X, s" t
</style>
{' Q1 o N$ y
</head>
# J% G! b- r7 I e! ~& S* H) v
<body>
" f( h0 q. x1 L" x& @. U" @2 p
<div id="pic">
5 J; S0 U+ f* D
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
! T9 Q. J) u2 n
</div>
# ^9 U9 Q: u6 T- t5 M6 ~
</body>
3 R4 c0 n. i$ X% L& X* c
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
