标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
}( ~7 a% j5 f- t7 o
关键在于：max-width:780px;以及下面那行。
0 ]7 p' H7 m0 H- x
固定像素适应:
& C, }5 E g" x$ o$ ~! I# X; ^
4 k4 t: l4 }- `( z+ C' a& m1 c
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> 以下是引用片段：
: m$ x5 m3 U* x; S$ n- x8 O
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" c4 k! k' U1 a3 T( B- [
<html xmlns="http://www.w3.org/1999/xhtml";>
( W: z' s8 S2 A& E D6 F' m
<head>
9 V3 s7 [1 n5 e# c8 t( I3 R
<meta http-equiv="Content-Type" c />
% x( Z8 _" U5 k$ ?
<title>css2.0 VS ie</title>
4 ?9 f: Y" j) X2 {/ y, ~
<style type="text/css">
6 G4 }2 I: O7 M# C% Q
<!--
+ C& l2 J, ~9 R3 B" F6 i
body {
7 l( s; s) f0 B6 v
font-size: 12px;
. N& F8 v" i) p. }. e$ ~) J
text-align: center;
" N1 x/ U. L# J
margin: 0px;
/ [6 g& Q" W/ Y' l' T# O l
padding: 0px;
8 t+ Z0 {% V; j; i4 G
}
5 {! D. X' ?" \
#pic{
. _+ |- ^# T0 r8 {
margin:0 auto;
2 p6 ?/ ]5 n( t3 C4 L
width:800px;
s" O- @1 h8 ?: O8 w" i
padding:0;
B# z! e" y$ m! u' {
border:1px solid #333;
6 R, X" y# M9 n+ K& U/ i$ z+ L% @
}
1 t) `' C4 R' I% H, \' U" n
#pic img{
8 ]" U# v. I2 B1 E5 W. ]% [" }
max-width:780px;
1 ?* W7 x/ [- j0 `! V: c& X1 O3 h. j
width:expression(document.body.clientWidth > 780? "780px": "auto" );
q% Q e" |8 m3 _2 a! e" a5 Y
border:1px dashed #000;
- p! s1 s7 j+ y$ z
}
$ N( |, r& h: R$ o
-->
! \5 Q3 _$ C7 M' _' Q
</style>
1 R. D. O1 _3 Y
</head>
5 m, A* }3 D- _
<body>
# N% t0 i0 C: r' H
<div id="pic">
, ~- X( K2 l$ f# f4 J9 G
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
4 s0 a6 w0 ?& z+ j2 Y; l
</div>
0 ^, t. a+ \9 P) B3 _
</body>
/ v& n) K* X0 D/ L3 [" g
</html>
* M: e0 b e, ]8 ^
4 v5 @0 G2 G0 p: m; f+ t
百分比适应:
; s$ ~7 D' e9 _7 a: y! ~
以下是引用片段：
: C% I4 N5 i. i. ^- @
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
@( g# ], U( @1 @. C o/ Y+ W
<html xmlns="http://www.w3.org/1999/xhtml";>
: j4 Z- N4 Z( @
<head>
" ?' W" ]. [3 q! h6 C- ]% [0 z
<meta http-equiv="Content-Type" c />
, K/ @' u1 j" ]
<title>css2.0 VS ie</title>
8 x4 u# K* j, O1 ]) C
<style type="text/css">
) Z# Y" L6 g7 y
<!--
+ |5 M6 b' |1 w
body {
. v* l6 {5 _: z; U3 b
font-size: 12px;
; {6 A- y. S. t. R/ A( ]
text-align: center;
* i2 C* `9 l2 A, c6 I9 @# A1 A
margin: 0px;
! Q! b& `& {, t
padding: 0px;
4 @1 x3 Y8 T1 h4 M9 P
}
+ \; {6 M" U- [- u: `+ q% M
#pic{
6 x8 Q8 p# F+ j4 ^% `
margin:0 auto;
" O8 _1 F6 y9 T1 l- {
width:800px;
) H; m/ W3 c2 i5 s+ G# o
padding:0;
l U/ j9 G) s, Z: U
border:1px solid #333;
& c$ ^* F0 R! Q; a) q! |! i
}
; R1 S$ x' D1 o: ?6 K8 T
#pic img{
4 t. P) k; A5 h1 J
max-width:780px;
2 g6 V* _, Q8 X" D- ?
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
! H2 s8 k, k% z4 Z1 @* Z+ z
border:1px dashed #000;
9 b% c9 K0 R& t% M" _
}
9 t$ S$ p, ?8 T0 ^! C
-->
+ U9 a* G3 B9 A }8 ]; W1 ^
</style>
3 V J- @# U8 y& S8 [* ?6 y* G
</head>
0 i7 \; u0 @- |7 K% H0 s! m
<body>
( A- I3 {, K# O4 B
<div id="pic">
; [2 P' w# `& Y( X9 p4 q" w. Y: F. t
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
9 h. J4 [$ W* K% D( O6 T
</div>
( x+ s5 e. V6 Y0 P
</body>
) }/ g8 @9 o( r d. p8 u' |# t
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
