标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
9 ?1 ^ Q! @4 T5 P6 Y0 Z8 I8 O
关键在于：max-width:780px;以及下面那行。
3 P7 K8 Z$ X. z- ~* F* s
固定像素适应:
( G' K$ a) |6 X( |. t. `3 H4 m+ e/ p
9 w& \! g8 {4 x9 r( T) M
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> 以下是引用片段：
+ V, \8 o( w1 q: L+ w V4 s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 ?3 A* ^% a" k4 A5 v9 I" @/ e8 h
<html xmlns="http://www.w3.org/1999/xhtml";>
- v* L) q6 f- \$ H' _6 P" u& a
<head>
0 W, K8 X$ u }
<meta http-equiv="Content-Type" c />
( v, _' w. l! D5 b# L3 _8 t. _
<title>css2.0 VS ie</title>
' v! Z: I8 o: |: {5 E
<style type="text/css">
/ Y; A9 @9 |0 D' n- ]
<!--
) b- U9 h5 ^9 O$ \$ K! G! X3 Q. K/ \
body {
, t3 N! _* Z1 D
font-size: 12px;
1 s( ]: ?' K1 m, S2 W2 N8 W2 ?
text-align: center;
# S; ?+ y6 M6 A- p
margin: 0px;
. ?" e& b: Z1 h7 r/ }
padding: 0px;
0 E, G( G1 ^ O8 T6 {3 r* D
}
; [) q5 ~" a/ U T- c9 ~
#pic{
/ h2 ~& q* U }" a9 q7 E! z+ i( }
margin:0 auto;
/ W; L# A) v: z
width:800px;
) i$ ]# O# [: Q1 Y; D: _- u9 G
padding:0;
/ `5 p a; a/ g9 a
border:1px solid #333;
$ e9 ^) ~* ? P' S* m/ N+ [
}
1 S* N# I3 A9 f! U) \: w
#pic img{
/ \, a/ G# k% T& v% m
max-width:780px;
. v! d8 {' G6 x8 [1 s& ] S" P
width:expression(document.body.clientWidth > 780? "780px": "auto" );
# @& L. q) t" F4 e
border:1px dashed #000;
5 u. k/ u/ I& ?" T( F
}
: D1 q5 I0 ~4 v9 @8 V& f; c# b
-->
* v$ \& q* K% f0 Q3 v* X6 C: ~! g1 ~1 }
</style>
9 T* @% S! w, N, O0 _
</head>
% m4 \) |& \+ T) ?
<body>
. {8 |3 h# K1 ~* g
<div id="pic">
5 ?1 B' Q9 `6 m" X5 h' S- t, k* R! W
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
/ A4 L3 M9 _! R" [" o# E
</div>
1 m( v9 v8 A7 b4 u3 Q
</body>
% a1 I+ t, [" i4 z7 W
</html>
$ z; @7 c+ m' P/ A; a; w5 \" A
& e* Y- {2 i/ p9 p
百分比适应:
& c9 i+ m" n0 D
以下是引用片段：
, Z7 `9 m$ l6 b& L' X! Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, F7 C% [: l+ q) i, _% b' s
<html xmlns="http://www.w3.org/1999/xhtml";>
4 Y' C$ c g8 A- C- |: ^- v
<head>
2 @5 u4 o, U. J# p- s6 W+ [
<meta http-equiv="Content-Type" c />
3 t: A" Q, a% d# r& l" M
<title>css2.0 VS ie</title>
0 P, y5 r# c1 O$ U7 ~ {
<style type="text/css">
6 F1 B# Q3 a$ s1 |# o7 E0 J# G
<!--
' ^2 R2 ]) ]& d! R6 p
body {
8 t" N5 m; _- H4 i/ H% ~1 D
font-size: 12px;
# y8 ?( T( Z% E. v$ M
text-align: center;
9 E% F3 p' l4 z
margin: 0px;
+ \, Z3 _# u' \& R
padding: 0px;
4 T% `6 K7 Y$ [+ E0 a* P
}
3 Y9 T( A t+ Z# Q3 |+ |, s
#pic{
: w7 h% c' r4 D
margin:0 auto;
3 u7 k. C+ R6 D$ _1 N
width:800px;
! E: y0 d, d, F4 O) O# |4 b3 T
padding:0;
y- N1 c3 s. _1 T0 ]" f
border:1px solid #333;
! L! m6 D# W( K# L; z
}
& c3 I7 H( w* Q1 \' N: Z
#pic img{
- A- J5 ?! d8 O
max-width:780px;
) V* L9 F$ d5 v4 n4 p l- m! k
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. N% Q1 g$ J9 H
border:1px dashed #000;
/ L: y" q/ `1 M# S( _) e
}
- u& U, ]3 ]3 [3 Y6 r p, v
-->
# g; Y% j" r4 h# ]; |! }' U' H
</style>
v' p) S$ E8 Y1 ?$ Q2 w
</head>
x# A. j! r, M
<body>
( z0 c, e, K8 \4 h7 {- M' `
<div id="pic">
2 H, K# a" J+ i. {
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
9 O4 h/ ^; p+ P' ^3 v3 x. f) {
</div>
7 U0 p: C7 T' s
</body>
+ |/ T3 Z5 I; l& C
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
