标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
& `/ Y0 c- v5 h
关键在于：max-width:780px;以及下面那行。
4 c! D7 z1 T/ D+ w! Z9 _0 R
固定像素适应:
5 z3 V- K( u) n( u/ h# F7 y
" l1 e, F# m' E% W( w- |
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> 以下是引用片段：
7 m: u/ u: O. O* A/ L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 h& N' Q1 ?( k* v3 |( ^
<html xmlns="http://www.w3.org/1999/xhtml";>
8 j6 ?6 Y3 L; {# H( l8 V5 G+ X7 r7 \
<head>
; b- F- ~8 h$ D4 T
<meta http-equiv="Content-Type" c />
# i; z7 {: ~( |& u+ g
<title>css2.0 VS ie</title>
8 o% H4 I% O- C4 g4 @+ _- p+ q& q8 ]
<style type="text/css">
0 L5 z; O. v/ A5 T
<!--
k0 f% O$ V6 G8 ^. F5 K
body {
^# q( k, G5 t! j n3 G& L
font-size: 12px;
5 p* M' K8 b! I& @! A
text-align: center;
0 e) D* ?+ Z7 [% h& e! V0 X- U6 i
margin: 0px;
2 {/ |( e: z% c
padding: 0px;
# @! ^2 H) i% @' r2 A
}
0 K, n6 v8 s- _% H( ]9 y
#pic{
4 X" ^$ p1 z- r
margin:0 auto;
/ @. K, L5 U7 [' n1 A
width:800px;
, C% B- y1 V8 p
padding:0;
# L0 C( b; [0 \5 u% Y- }! r
border:1px solid #333;
1 k; |' _8 s9 [ [( D9 S
}
5 V. }$ L# P3 a: D7 F* w8 p, h" I
#pic img{
8 X) s& E+ A0 _
max-width:780px;
( o. ?" z" \5 j
width:expression(document.body.clientWidth > 780? "780px": "auto" );
* ~7 `! W& I0 Y
border:1px dashed #000;
& \3 v8 W$ R0 S9 M
}
" h: S* D( _ e
-->
& ^5 L* u/ |+ e; p: z* H; o% ]+ |- Q
</style>
& Z( k8 U3 K3 T2 \' A) @) o
</head>
: l' Z _, N4 v* T4 k
<body>
6 F, s/ S9 ]2 e/ o) f
<div id="pic">
0 I3 ~ T7 {0 ?/ U G( f% _
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
5 s+ F- C2 V- Y% E' g( B* C+ B
</div>
9 q+ `) H' E5 V( M' H2 ?
</body>
3 g/ {% d" C |8 g+ G' V+ U0 {6 |
</html>
+ d9 u( _4 b3 h2 B6 C) ~) p$ R
& |$ L9 }" a) V1 ^ ]8 G
百分比适应:
) F" z1 U# ?. }1 V2 k
以下是引用片段：
. u! m2 Y5 F1 v! P9 m( f& B
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 K s9 Q) \5 E) F: {7 w
<html xmlns="http://www.w3.org/1999/xhtml";>
0 m8 B) o% e( X/ a) w' V0 E
<head>
5 i4 u; w7 Q$ E" V3 l! R
<meta http-equiv="Content-Type" c />
! K4 d. R' T1 D) i9 I
<title>css2.0 VS ie</title>
" T6 b( i0 y1 W
<style type="text/css">
2 A) E* V6 p* o# U, r
<!--
+ g! {8 R! _; O; \8 H
body {
+ \% _9 P" N) L/ l( d0 o& \1 j$ q
font-size: 12px;
4 [- Q+ w3 [1 S. R
text-align: center;
9 I: ]4 \" T" M7 m$ }
margin: 0px;
5 s4 B( r" z* }
padding: 0px;
4 Z) v3 Z9 }& `# K/ S# A
}
" `' \: v1 p% T( R3 n1 J
#pic{
- m' J; L6 l* d7 G4 M" K, z' Q) d
margin:0 auto;
7 w ^/ Z0 j6 x
width:800px;
8 O# m9 j4 {7 z# _9 G
padding:0;
6 H, p6 p) e+ Z1 ] i
border:1px solid #333;
4 B# _4 O% u; W& ~- R
}
: p" e1 U( g) K9 c* ~, [
#pic img{
$ ]( E2 @$ U8 ^8 O; Z
max-width:780px;
0 L: J, s2 {" Y* D4 }! V' h
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, J5 Q7 u4 C5 [: O3 k' x0 O8 a$ R
border:1px dashed #000;
7 }! f, k6 k; r
}
7 M) z9 R$ r4 ^4 M- |
-->
+ E- d# h2 l8 j/ J$ u, K
</style>
: |7 L$ c8 D+ j" E( f
</head>
% o1 |) @6 M1 @, u% `
<body>
2 W( Y5 O9 h( a
<div id="pic">
2 P) \: E( n; A2 F
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
& W4 \. C9 Q; R, E8 B9 X: R
</div>
# s2 y. y; _8 K- p. |- D( K; N
</body>
# n0 L9 ?, v) B6 h9 p% Q4 k6 m
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
