标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
1 ~4 W# g8 n* p8 q
关键在于：max-width:780px;以及下面那行。
5 R* {6 Q( D( w0 t1 z
固定像素适应:
1 U$ n8 o: f. s$ J
8 P9 v7 d% c7 l4 n
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> 以下是引用片段：
* @0 ?5 ^) I/ D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! k' ~' X; y+ m2 y
<html xmlns="http://www.w3.org/1999/xhtml";>
, G* v$ O* I+ a$ Z5 |8 H" s1 T/ W
<head>
; U% X0 a; j; m) |6 F
<meta http-equiv="Content-Type" c />
9 C/ {; c) R2 R$ \7 L5 @# |
<title>css2.0 VS ie</title>
' Z, S5 s. `7 [. n+ s9 k- Q6 n8 v/ i
<style type="text/css">
9 H/ m5 m/ M# ^( I1 l, i& W7 Q
<!--
9 h U& |$ |/ D1 j9 E1 X! S
body {
3 w# i; S* o- U8 Y
font-size: 12px;
3 P- d) g: z2 }
text-align: center;
$ I" h1 x }* Z, R+ y. U
margin: 0px;
4 _8 G6 S; i8 j, `* [
padding: 0px;
/ ~% l* V; j# S6 g+ M; C$ ]
}
5 |' `7 |+ [1 k4 r8 j& @
#pic{
G8 p7 E3 A7 J9 L) K1 x. h4 @! w8 o3 }
margin:0 auto;
2 T$ K+ Y4 ^% L6 ?! P5 X! \; h
width:800px;
8 H% Q& ?( n7 m& G- w2 f
padding:0;
1 a9 |' o0 W8 J5 p3 p7 A$ t
border:1px solid #333;
6 w/ \$ _( Y, Q& F6 z" d
}
0 Z1 b4 a! H. C" C; y1 f
#pic img{
, e3 b: |4 z; k' J
max-width:780px;
; E2 P' G& D& ^! ]' |$ n7 s( p0 i4 L
width:expression(document.body.clientWidth > 780? "780px": "auto" );
+ u0 |% E8 c& Y/ C8 y; A) Z$ a
border:1px dashed #000;
- B. j! e8 N- H; a# _7 L0 S5 |
}
% q3 z* B8 Q6 _. \$ S
-->
4 ?9 ~" g' q, i9 w+ ?9 {
</style>
/ j* G5 i! o( j+ _8 R/ M: ]& K
</head>
: L- v5 t$ A* A" y; o W
<body>
. t$ K6 q4 `1 ]& o2 S
<div id="pic">
- _8 J5 I! c$ a* ]# m$ G1 z: E
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
4 n) Z5 r Y' K8 y2 F# D2 `2 g
</div>
8 s' K' T: t3 L8 h8 G
</body>
; J( ]5 D9 D' }, Q) L7 P' l! c
</html>
6 l" B5 A ~2 c" ~
0 e* e S1 m5 v
百分比适应:
2 C. D$ u3 T& w( {
以下是引用片段：
7 k/ d: p' j/ L6 o( z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" c5 O" }# x" i5 W7 s3 D& ~5 ?3 b
<html xmlns="http://www.w3.org/1999/xhtml";>
" t" u; V# G3 ?: X
<head>
, S( k, w7 e, w
<meta http-equiv="Content-Type" c />
! j( c8 {6 C0 O
<title>css2.0 VS ie</title>
( l: y' g2 W3 M( _5 W4 [
<style type="text/css">
& P) f, L2 G \* l3 X
<!--
7 p' ?; ] d& | W
body {
4 x0 I) a: `4 C/ [ I0 b0 p& `
font-size: 12px;
) V% ^1 D: t- X6 i
text-align: center;
6 D+ o# b7 \6 q( w% k" q
margin: 0px;
. m+ a1 {+ P4 U% j h1 ~- N: X/ G
padding: 0px;
" H2 W0 u" k! v) k' l
}
7 J- r( c# X. I' H5 o2 W
#pic{
2 G( }, s7 T6 P, P- R e5 N
margin:0 auto;
3 r% j/ h' ^8 c/ B, ^% l K$ E) c
width:800px;
0 o; J0 r% R) v3 [
padding:0;
- e9 {; k0 B5 m0 n1 o
border:1px solid #333;
2 ], S; p/ w& v- r# z
}
4 W) B' @, ]# V+ Z' p% {! v
#pic img{
: S! {8 O0 h$ G+ p/ a) l; B, o; C
max-width:780px;
# ]* ^! }5 [# L! H: y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
# O, v& v) a$ Z/ V! f* G
border:1px dashed #000;
0 Q6 q4 I# N* c+ P6 L6 }3 a
}
' E2 @& M5 q2 S8 P' I: f
-->
4 N4 f' w1 t, y+ j6 |- W7 L# @# E
</style>
% h5 z: q u2 C- M
</head>
3 p0 e' e, A+ l( |+ H
<body>
+ D y6 L* ~1 U6 O4 r# w
<div id="pic">
3 D( H6 `% r1 o4 S4 N9 {, t
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
8 \6 H0 f( ~$ ]0 s
</div>
' c* q, o9 r) n, A0 D5 e3 x6 t
</body>
0 j9 F- j6 `- F' c% e
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
