标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
7 p v2 |& I0 A0 g4 V, t
关键在于：max-width:780px;以及下面那行。
6 C- v# d# B. r1 C& x
固定像素适应:
5 I0 D! ~5 L5 {. s
! A1 i8 E1 K2 u6 C8 C, h$ \9 O. k
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> 以下是引用片段：
- }6 A2 F, c7 x/ _5 i1 o& ` H
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 v0 V) g; j0 ]$ S
<html xmlns="http://www.w3.org/1999/xhtml";>
. |& M" c+ b0 ~
<head>
2 z! B% E5 L7 t
<meta http-equiv="Content-Type" c />
# U9 u9 g7 U0 ?! l
<title>css2.0 VS ie</title>
2 ~9 F( T0 { K9 Z* J M
<style type="text/css">
C2 R' k) m6 v" E6 q
<!--
! l/ f9 x1 m* N' B
body {
{) m4 b0 B6 c5 I* f% e! Y
font-size: 12px;
! h9 w2 K" c6 F+ \) \0 j# v. K
text-align: center;
+ a/ |# t5 y- l1 ~6 d0 A
margin: 0px;
% S: a( t. }9 _9 ^
padding: 0px;
4 F% b- [8 N* x; ?/ u p5 _
}
$ N( U( l5 X/ H+ c
#pic{
) @3 j4 k5 o7 t5 k0 U! B" a
margin:0 auto;
$ z1 |+ {$ {; B+ @
width:800px;
: w- r0 {0 ]# I) E0 s
padding:0;
4 m5 i) X5 ?# B3 e" r% p$ I: R
border:1px solid #333;
/ ~# E( {+ T% u, T
}
7 {7 D: t# L: @3 b* p; u* Q
#pic img{
1 x+ ?2 s1 c! N
max-width:780px;
' G2 }7 P2 E4 b7 W: p- t$ W
width:expression(document.body.clientWidth > 780? "780px": "auto" );
; [ T6 f0 P! V; B3 K3 F& {
border:1px dashed #000;
9 }" @3 Q* S& j6 m0 v
}
* j5 I c; |. Z3 {
-->
0 i: [& ]# u: @1 h9 Z) o' p( N
</style>
! ?: D* o5 z, B8 ?/ h
</head>
/ Y# ~$ R/ @- e& u3 ^( D9 l, a
<body>
7 _9 v, z7 L# {* l/ k4 ^
<div id="pic">
; C; ]' ^9 T/ ~
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
% \. L3 }! p, q" b2 H; i: y
</div>
" [" O9 B" G* h, ?8 |1 b2 \% T
</body>
) f0 H* y2 t, ?! }, I
</html>
3 ~" s8 Z& x- r, ?" h t
4 H- y0 V& O) j/ t
百分比适应:
6 d. s$ U r7 Q6 {* }+ Q" {/ }
以下是引用片段：
" v/ ^: i- u& T$ Q3 t
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% c# k# B. `; ^+ D
<html xmlns="http://www.w3.org/1999/xhtml";>
7 K7 N" @% K) [; l
<head>
4 }( ^3 k# O5 _% ~0 W
<meta http-equiv="Content-Type" c />
3 O& T! Y j6 }0 d
<title>css2.0 VS ie</title>
2 w% ?" S4 l& v4 i; a0 q, C
<style type="text/css">
- h5 M0 ]/ Y6 Y# k5 p' D: Y. f
<!--
4 t3 E, ^: M* I, K7 [* i& C1 V
body {
0 M: b" q) j) m8 u T: C( p
font-size: 12px;
# ^$ d6 J9 f5 [% q$ d S
text-align: center;
. A# U* }# N3 @8 U* w" w) B
margin: 0px;
' m5 H( j l- M- T0 ~ y8 |
padding: 0px;
1 g# O+ o: `2 b( v9 k( s3 z
}
0 a4 J7 ]- p6 J% x% g
#pic{
2 H5 ~* e! D# O
margin:0 auto;
( N4 e" i& S; G1 |
width:800px;
) j& b7 v! F7 t, O# p8 B+ i
padding:0;
6 V5 o6 N' Q7 N7 q" ~
border:1px solid #333;
: W$ N, ]: t( s7 t6 _6 c
}
' Q, {/ `) q+ Z
#pic img{
; |: P0 v1 B/ I+ S) \9 V
max-width:780px;
5 t5 d; n) N e
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 u) Y$ u, s/ z6 N8 n9 u# S+ ~* Z
border:1px dashed #000;
' M& M4 ?2 D+ U, |
}
4 P* i7 ]( Y. i$ e/ i" `8 F
-->
1 o& T/ o$ s- }. t. K
</style>
& G( `, E `9 m/ q$ n1 D$ P
</head>
7 u$ [4 X; u. a& U0 f; R
<body>
0 s+ [8 N8 U) q( p! b
<div id="pic">
# V% k( `" p$ R
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
: T, @. \+ \8 R, ~ a# D
</div>
& Y. K3 m' V* G2 `) S2 j
</body>
0 q, W6 \0 l$ m
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
