标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
+ A( q1 ]1 e% n: c4 w: s P
关键在于：max-width:780px;以及下面那行。
0 r7 `& H/ S+ Z' ^1 h7 ?
固定像素适应:
0 R6 G# {) w" x5 s
S& M: D: M& Y1 r/ I# f$ |
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> 以下是引用片段：
/ x8 V% b! ~/ G+ `# q" @! K# ~) c
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. S' j; ~$ G8 d9 P4 t; V. t* s7 C
<html xmlns="http://www.w3.org/1999/xhtml";>
6 M6 J# a1 l$ }9 _' J% l+ l, e
<head>
0 m9 T: ^& p4 n T7 T
<meta http-equiv="Content-Type" c />
# z9 m+ T9 a! v% Q/ a. S
<title>css2.0 VS ie</title>
6 ?1 f! o( I* A
<style type="text/css">
3 u+ V0 q$ n& K2 T3 t% G( U
<!--
9 | s* t: Q9 |' U
body {
1 D, L6 ?9 P; G) x
font-size: 12px;
6 n# Y' h I `+ x
text-align: center;
A4 A# W3 z8 S# a2 m
margin: 0px;
: T5 }( I2 D) P, x; l' T
padding: 0px;
! U6 p1 {9 k2 R' I0 ^3 R9 V
}
" G6 e& u8 r9 P8 f
#pic{
- Q* c& w5 t m5 Z, Z# q
margin:0 auto;
- p% X0 N4 W6 j! U9 u
width:800px;
; M% S( |7 ]$ O/ G
padding:0;
# t v( w F C( C2 n% o( J
border:1px solid #333;
' U6 `9 u, n& I3 I* W0 Q# T% u
}
& c6 Z- C3 q* O; d( O
#pic img{
I; f" z* Q5 h8 R
max-width:780px;
8 l. d, O* h! \, m
width:expression(document.body.clientWidth > 780? "780px": "auto" );
; A, F& o# |5 _4 T. [4 o! I
border:1px dashed #000;
4 x; x w) G D' w
}
- j9 K" f8 t. {3 G" G* \
-->
6 G$ M3 y" O- N4 U! H! B
</style>
9 I$ _/ \ i s* e- M. p- y
</head>
7 @+ j4 G9 X. G5 {/ c' i; e
<body>
9 ~3 x6 p0 k# F4 p
<div id="pic">
- H# E) _! F# ]. f
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
' p8 U4 w) N7 v
</div>
5 S' \$ w1 g! ]6 e$ A3 q
</body>
$ j! v' |/ b+ \
</html>
/ r, w, Q- f1 R& S
1 @( y: c9 O( Q0 g7 g
百分比适应:
$ ~5 o' M0 \) b& s% M7 Y0 |
以下是引用片段：
- f1 j C; F& w0 L: P
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 j& V; @$ i- L( p; }2 A
<html xmlns="http://www.w3.org/1999/xhtml";>
/ N- r' b; U l: e7 l1 K
<head>
+ C2 L; b) m- L' h3 |. S
<meta http-equiv="Content-Type" c />
% R; l, M# a% @* H8 x
<title>css2.0 VS ie</title>
$ d* `* H( h4 O' \1 G
<style type="text/css">
$ m) ?$ \0 n( K; z+ P' l
<!--
5 J/ J' t' w9 Z7 D
body {
( i/ _& i+ ]* ^
font-size: 12px;
. Z- E, ?: @# f! G" U
text-align: center;
& Y# d2 ~8 W9 C, J$ j
margin: 0px;
& D* O9 q) S5 t% A |- l
padding: 0px;
7 K3 j+ n; C k2 _ ]
}
+ _ h% S& ~; s$ P
#pic{
$ w# I( n1 V7 z% k9 c/ E! ^
margin:0 auto;
9 b' L4 ]% V# [- _9 ?& @% i
width:800px;
2 |& o" ~' H( t8 ~2 W1 j9 W& x- C
padding:0;
3 J: `3 n- P$ l! P
border:1px solid #333;
" s* g+ V; j' v- S
}
3 ]& W) m8 t* Q
#pic img{
5 k8 |# |" V0 G9 s& i3 [( s1 r) S
max-width:780px;
% V5 v; [0 l, _) A8 P9 J- d
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
+ t# S1 L9 Y% Y. x6 R6 l
border:1px dashed #000;
; {' R7 |, }) F! ]- `# s$ S& ?% ?; D
}
4 j" h8 r+ ?- `$ X2 `8 C; l( W" V, P
-->
2 W) i# V# k7 F$ s: a W
</style>
# G. {4 ]3 I( R( ~* e
</head>
2 \( }8 c& f* [9 P
<body>
, H! E6 Z9 e; V7 g1 J; U. }: k
<div id="pic">
% U( g2 s! z# W
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
% v8 q( A' [8 ?
</div>
q, W8 I4 L9 ~/ w" `5 r
</body>
0 T4 L: K% E6 H( f3 H4 X) {
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
