标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
7 B2 |6 K. V/ z3 W( Q( ?
关键在于：max-width:780px;以及下面那行。
2 a' d( @4 E! F
固定像素适应:
1 x. R# N$ W# ]2 h3 Z, v7 O, ?" ?
, y! W2 s0 [4 e( B. 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> 以下是引用片段：
/ q8 A6 |% Q. z4 E4 P
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: _; b) R! q9 T6 U+ a- R
<html xmlns="http://www.w3.org/1999/xhtml";>
; y" E' I4 e% F' J: H( ?: O2 m
<head>
' U1 y3 [- Y' ?+ S
<meta http-equiv="Content-Type" c />
2 [: s1 ]5 b5 L3 R
<title>css2.0 VS ie</title>
* c; _1 e5 C* a7 m3 \1 F# O6 |
<style type="text/css">
3 t& D7 I* C- O, a5 O% P
<!--
1 J, l0 N5 b- K. D1 G+ p
body {
8 N8 ?& Z& O# u, u* y# t$ C) \8 h% t
font-size: 12px;
- u8 [7 ?& E6 ?# Y3 n I
text-align: center;
1 X$ ?! {6 H) M% Z F
margin: 0px;
1 g; S" c! [7 M: q
padding: 0px;
& W5 Q( i9 U/ o) j6 N8 }( s
}
8 N8 h5 u- H5 |
#pic{
+ c. J ^& K$ u4 g ~0 e; I% O
margin:0 auto;
, w& Z# {9 H- v0 q ~& j
width:800px;
& E" ^) v- @1 w6 r; l
padding:0;
5 x l q3 a% o- {8 E
border:1px solid #333;
b g. Q9 `* R/ A, O$ E
}
" S$ H! K+ w1 y4 Y, E, B! e/ i7 a
#pic img{
* v! }# F" C* n. t$ ^* e1 `0 F( y2 Y
max-width:780px;
: }1 a+ Y" X. V# A# @
width:expression(document.body.clientWidth > 780? "780px": "auto" );
. ~& ^$ f* f& o7 M; Q5 [
border:1px dashed #000;
- Y+ N b* J8 L, U- Q* I4 P
}
$ h$ h: V) t0 N& k0 y/ R9 }% H
-->
: l. e/ W8 B$ X. n5 n* o
</style>
3 `1 c9 t o& d7 U6 p8 x/ a8 D
</head>
) l. e O* R+ o. G* i+ I" d! R3 R
<body>
! n% i8 n" l- s0 s+ l
<div id="pic">
# i$ S- O- \5 d& s9 D& _& C
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
4 `% h& e* I5 ~/ O0 ]$ C/ }
</div>
1 ~, V- Y, U( c* w1 r9 t. v
</body>
1 C. n9 R# L& b9 `/ `' t/ H
</html>
9 u7 ]% P0 ]4 |: k% A7 Z6 C
( s, E% S4 [5 J% ^/ O, t' [
百分比适应:
2 S! Y2 \9 l% U% e8 y
以下是引用片段：
% K* P$ D; v1 K( T9 @! _: s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. ~; U0 U* ^- L* `! E
<html xmlns="http://www.w3.org/1999/xhtml";>
% ?6 C0 n6 X* i% s/ f
<head>
% R1 q4 G6 l( f
<meta http-equiv="Content-Type" c />
% E, i* Y: F" M7 g' s
<title>css2.0 VS ie</title>
) @& K# a) P4 C! x( w( y' E
<style type="text/css">
( K: A: Q0 ^8 H1 X8 ]* k8 g
<!--
4 N9 w5 t! Z* F* W8 q
body {
3 N+ u7 S, @ S6 m
font-size: 12px;
% _0 \# a2 @2 f+ B9 R5 n# S x" m
text-align: center;
+ f( \! ?. A+ ~+ G
margin: 0px;
2 A2 s# _ k1 Y. q
padding: 0px;
; W7 y. \$ o. J! E1 Q5 B& l# q2 K
}
: E4 a6 w# G, @
#pic{
& M) @- L. v- F+ w5 z g S
margin:0 auto;
* k" S% F K0 y* G: |
width:800px;
e- ?: i8 ~6 ]2 S: v% S
padding:0;
1 [/ O) X J' l6 f/ H6 s
border:1px solid #333;
' z/ Z3 _& \9 H: g
}
" H) R, v( [/ L! W* x3 _
#pic img{
9 u; n( P L+ Q: K! p
max-width:780px;
0 N, y N% R& _0 z
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
: M8 ^9 x& ^! J9 H0 c/ Z
border:1px dashed #000;
7 Q* b Q/ [# P
}
8 ] T2 I$ B# J, ^: D& m
-->
, V, \# m( Z7 B5 l3 Q z
</style>
q7 B" F1 V6 b+ ]+ ^" @
</head>
9 b" H, O K( _, u! x: s# J& O* {
<body>
. w/ T) e* W. w2 m$ @, B
<div id="pic">
' s- r: y4 A) W: M* m
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
6 j* v4 w) Z. `! \
</div>
' F+ h$ c* [- W" u5 @4 i) E7 u8 C
</body>
4 i0 ]& W) y4 f- [! ]1 X/ A
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
