标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
1 Z7 ~% D0 `. N) u' ^# a
关键在于：max-width:780px;以及下面那行。
# F0 n% y G: j/ A* ?
固定像素适应:
& e8 A/ Q' d+ P& w! V
4 J! p" P( B# K+ j7 L" m$ b
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> 以下是引用片段：
! o, ^; s' t' D0 m+ {) m
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: w/ Q1 w5 `' d# y) b
<html xmlns="http://www.w3.org/1999/xhtml";>
0 S {8 u4 O4 j( K1 k# w: H
<head>
6 Y2 X; `7 e% B! B
<meta http-equiv="Content-Type" c />
- q; u0 I+ |+ K
<title>css2.0 VS ie</title>
2 g. h6 O0 {8 L4 `6 f) t0 W; p
<style type="text/css">
# }8 s" |2 q8 n: @2 g, a
<!--
! X5 P3 L$ i4 Y; i- K# ]! I( Y: v8 Q
body {
, a8 g0 M: N8 r% k, m% J
font-size: 12px;
: j+ d* H! b) E% x- n- R
text-align: center;
' ]5 G- }' V9 p; g' u" s" [& o
margin: 0px;
7 q; _; _; I4 v. z; B' j
padding: 0px;
! C$ ?7 z8 ~$ Q6 g8 N% j# H
}
, |8 C4 a3 d: _) }' p+ |
#pic{
! t0 S1 F5 k9 m$ ]7 R% `; G8 I! g
margin:0 auto;
7 g% q6 o1 h2 }+ g8 N% o6 N
width:800px;
) h. \1 G2 z; f4 Y2 r* t
padding:0;
" a) U0 M |; y! n3 q
border:1px solid #333;
7 ]9 [! g5 [3 {0 o, E+ O. M" S+ T
}
# Q \3 n: {( g H$ I* ~$ x0 S
#pic img{
& V) `$ U. C5 S3 V& H0 Y
max-width:780px;
, z1 u" T% c, c& w! j& O9 Y
width:expression(document.body.clientWidth > 780? "780px": "auto" );
3 O# v# l% \( a i0 r
border:1px dashed #000;
- g0 p z* s! ~8 T, I y
}
& h2 {- ~" d# l3 a
-->
1 n$ X, {& A, b: u& \
</style>
+ i+ s- s$ v2 N# z6 Y
</head>
2 I; @, t5 p+ E0 R5 {# m2 f
<body>
9 B! I: a) P$ N! V
<div id="pic">
; ^3 f! l9 c) Y0 b2 d8 Z% t5 I
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
8 P$ K5 _) f$ G- h) i$ @
</div>
B7 I& }+ I/ q6 f/ _+ Q4 b
</body>
. _7 U/ {! z# t6 _3 j4 S, t& k
</html>
) H2 ?, g- ~. e8 ^1 o2 H
4 |0 b- k1 p. O6 v6 L; g
百分比适应:
1 @5 ]! B4 o4 U9 j
以下是引用片段：
& k4 H; u4 O( x* `/ p+ T6 o: r
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ k. D, Q9 a! c6 i
<html xmlns="http://www.w3.org/1999/xhtml";>
6 ? k. N) p/ H5 Q; h+ t9 ?
<head>
]+ K/ K( v+ b$ _
<meta http-equiv="Content-Type" c />
4 R* M! ^3 U( K$ U, X8 P8 a
<title>css2.0 VS ie</title>
) I# I" g4 o: k o! b
<style type="text/css">
$ _8 q% i+ U) ^% @
<!--
* a. n- I* F9 K$ H5 h( R
body {
+ W& E1 L- k5 _, ~
font-size: 12px;
8 [' {2 _% B7 J5 {- E9 y/ p2 x
text-align: center;
, y) u" ?. g% t) A
margin: 0px;
1 B2 L6 E3 m* @7 R I
padding: 0px;
+ C- F! X& O$ S# K) ?
}
. `3 d! V+ N, K( ^; R6 ~: {% z
#pic{
Z! V( C: \3 e; }& K: f% r+ h
margin:0 auto;
7 R+ h v4 T$ J2 l0 h8 x% ^
width:800px;
) ?# `* L' k% z1 X; T
padding:0;
! I, E9 }+ i- ?( z
border:1px solid #333;
( t+ @" Q/ g% n6 P! P
}
/ H7 ^# W, o9 C. l9 ^, _
#pic img{
* S" d5 I1 l5 U9 ~
max-width:780px;
8 y% _+ q4 H; q& b4 ~( y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
4 `& i" A; I: @
border:1px dashed #000;
n" U" K; k: N+ |+ r0 d7 b
}
* Z5 g" B7 n6 t
-->
4 U3 t' Z5 J0 W) N6 v
</style>
& w$ G; R2 q- A. n* P3 t
</head>
% a' i( N+ @, _
<body>
' U7 C' Q4 x, y) [+ t
<div id="pic">
3 c' a2 X4 X1 n: @5 w% R
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
/ N( T p" {: e
</div>
! x/ r6 @+ C% v3 {; J+ v
</body>
/ I. i/ g7 }3 M0 F' {* |: d2 Y2 X/ S
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
