标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 K8 `* D6 {' C% ]) Y) f
关键在于：max-width:780px;以及下面那行。
! h# L' E- O* n: W m& x/ H4 x
固定像素适应:
7 f% S0 a5 Z7 H1 |" a. o: _
) x" L3 d1 V' }8 K- d
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> 以下是引用片段：
9 x% h m) n/ I5 e/ y0 [! g w0 z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- W& A6 j t/ J! x! U7 W" j
<html xmlns="http://www.w3.org/1999/xhtml";>
2 Z$ D4 i8 T5 ~) h
<head>
% V @& y) q& w% @
<meta http-equiv="Content-Type" c />
% i+ D4 q: _ v
<title>css2.0 VS ie</title>
" H8 ^% A' n! P' y9 T1 L% r' n# r
<style type="text/css">
2 @6 g# X6 t- F% ^) ]! J! O& A
<!--
( X3 x$ |; }7 \8 r- r7 D% v5 ?3 b/ w
body {
3 N/ @1 ~: ^( l5 Z/ W
font-size: 12px;
* S) a: h/ Z, N
text-align: center;
8 J; K, x3 B/ i1 x! \! x, e
margin: 0px;
1 }5 ^% S y7 r1 M' ~5 T, P5 r
padding: 0px;
{0 z# O. k% w/ B. F3 q- `/ E
}
. W+ h& x+ P/ h4 }9 J4 a
#pic{
0 o0 a7 U/ e# |) R8 t) Q9 |
margin:0 auto;
( p1 t$ t/ A! o0 H) i
width:800px;
5 W9 x/ ?; E4 C$ P1 w
padding:0;
# n$ F7 d* Q( k
border:1px solid #333;
0 L' k- X; N1 J6 g& m' r! n
}
) E! {0 _8 k' g5 s8 \! N
#pic img{
+ u) j) s% a6 R3 ?
max-width:780px;
' Q% M! u, q" s; d1 t( v
width:expression(document.body.clientWidth > 780? "780px": "auto" );
+ g0 J; f7 G* \1 j; u
border:1px dashed #000;
' e/ k& D2 m; Z$ e$ I
}
3 w6 w1 i- {, y6 i" W4 f' K: Y. ~
-->
" w5 [$ p7 K( J; ~2 X( {
</style>
. o: Y0 j4 O; R1 V. `" A8 {
</head>
. L- m6 A. E: ]; q2 G
<body>
1 \' s- R4 }, I& W5 D. h
<div id="pic">
0 O: y8 }* A- n
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
0 ?1 q: V4 g' m! a; u; t& a
</div>
# }+ d# d' u( A6 c' k# u% i
</body>
" h9 K4 F+ M' m6 I/ A; u: a
</html>
/ U3 c$ R4 }6 V& P- L9 ]0 U
# N: e$ A1 k! {8 I: z: }1 x( f
百分比适应:
0 W4 x" u- [" q# X
以下是引用片段：
) B! k B" Z9 a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! ]1 D& W- d+ L( \8 j: k
<html xmlns="http://www.w3.org/1999/xhtml";>
7 c) o! f0 g' k: o- I6 c. T1 R
<head>
1 U1 S, D) h0 g7 h5 Z0 a
<meta http-equiv="Content-Type" c />
! p3 B& t2 c5 }& [) K5 A4 B* S
<title>css2.0 VS ie</title>
+ Y/ W3 x" |; o* z3 \
<style type="text/css">
6 a( w w! G8 d7 T6 l, j
<!--
2 v3 C4 f6 X, S9 Y* z1 G
body {
3 P$ W2 {1 U7 G$ A- S
font-size: 12px;
G' B& @& ?2 _
text-align: center;
" w1 a$ B$ R. q7 y* o
margin: 0px;
4 h! X0 a& f; C' \9 ^& J
padding: 0px;
+ J9 w8 y" t$ ~& t
}
4 Z! ~$ L, ^* \- C& n
#pic{
/ W a( w/ S5 {9 v) z
margin:0 auto;
g2 q. h: @9 o6 L/ {9 E" J. Z
width:800px;
0 n0 R1 y: x5 e/ x
padding:0;
, ^ Y" j: C/ s( {9 {' }: [; O! {
border:1px solid #333;
( ?, M G" ?5 z
}
3 s# e9 D% v9 u- }, \. x
#pic img{
4 D0 V/ @; L0 C
max-width:780px;
0 r! g. w4 m }# t# Y3 S7 W
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
$ s5 e% z! a" s7 x
border:1px dashed #000;
2 `5 e1 Z8 o, X$ {& _( ]
}
- Z' C/ d( F" B9 n! U' T
-->
6 T* w+ Y5 A v0 y) U
</style>
* _- N4 K" n0 a3 I7 K
</head>
5 G7 s4 p5 E5 b% J
<body>
# }" U1 ^1 J/ y A/ i
<div id="pic">
" Z# \# G( ^- B& q
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
- j( {; W- R1 z0 z. |
</div>
6 e3 M, C; Z1 j- H3 o8 c; }
</body>
* I" b: p/ t9 t" [
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
