标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
3 m6 P9 e% i& D+ S; _7 v
关键在于：max-width:780px;以及下面那行。
, T) Q* L8 Y+ o; [$ D+ d7 s" w' f
固定像素适应:
& \8 @& p3 H1 }9 I' b* Q" j6 K* G
( N& o6 s S' L+ I# 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> 以下是引用片段：
+ x! O8 f, m/ p: @
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, P0 r# L! l$ H& b4 p; [
<html xmlns="http://www.w3.org/1999/xhtml";>
9 n1 S! F% [. x
<head>
* p( q g: e" d4 w P
<meta http-equiv="Content-Type" c />
! F# l' m b; f7 q3 V2 Z
<title>css2.0 VS ie</title>
, \ a) T4 I% O' k: T3 P' L
<style type="text/css">
" _( a+ J1 s/ V( |/ F* V& R
<!--
. d- a# A! j1 X0 d3 h3 H, \; i
body {
3 R# W/ j1 `1 l* S/ {0 q- M: G: C
font-size: 12px;
" K0 y& m5 Y' N' E7 q5 e
text-align: center;
- I; X2 t( t# ~: A3 J
margin: 0px;
6 F7 \1 Y5 T$ X" |. M
padding: 0px;
- B4 H9 n5 N9 X: O: V) u, e
}
# Q+ _" @, u+ |4 F: r
#pic{
' _6 m. E5 {9 p' O/ n
margin:0 auto;
$ @- ?/ s) u K3 ]
width:800px;
1 d$ P3 d1 [ w/ i6 J0 A- J w3 t
padding:0;
5 |/ u$ J6 ~% |8 i c- n6 `
border:1px solid #333;
9 t2 Z$ W* t6 W) I j% U
}
( o) O3 x6 m3 c( {/ L" c Z
#pic img{
) e' ]2 L5 t1 H9 s6 |
max-width:780px;
2 G( ?# l8 m8 H: I! R Q
width:expression(document.body.clientWidth > 780? "780px": "auto" );
" V: c# \2 @: `/ E5 `+ b
border:1px dashed #000;
% j/ U+ w' O, Q
}
8 A1 A" P; m3 N9 A0 {5 l0 M
-->
6 A. D. H0 r9 @, a3 o3 B0 k
</style>
4 V$ q E4 @( A) j! `" x
</head>
: |0 }2 r; [& X! G
<body>
5 M1 H# n" o6 K4 G& C- G/ e( d# d
<div id="pic">
" h. \) a1 k- w/ `7 [
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
* n/ y, a, U8 D
</div>
+ j' i" f3 O: S3 v6 N8 S
</body>
$ V- t" }6 E# z+ h% v( @' y
</html>
) N) C8 }' P" k0 j$ h
5 W0 v6 j# M! Z
百分比适应:
3 w1 J3 N) N% a& e
以下是引用片段：
2 f Z6 x8 s- e* H1 E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 ^8 `0 q2 N! B* C# Q$ l6 X! I9 I
<html xmlns="http://www.w3.org/1999/xhtml";>
) }4 L9 w' `8 a2 u
<head>
. b; C8 @& Y3 ~ u; \) H2 V
<meta http-equiv="Content-Type" c />
+ n; {) |6 Y& D! n0 q6 |2 D9 y
<title>css2.0 VS ie</title>
4 Q$ |3 `% C, ?5 ?
<style type="text/css">
9 i* p8 J& @# y$ T6 [" j& N5 k
<!--
$ m" v5 }7 x' i0 Y" t
body {
8 F/ |0 p8 y% z: ?
font-size: 12px;
; Z6 i& ?3 ?. Z0 d
text-align: center;
; F( w1 X6 C, Z h6 C
margin: 0px;
. D" C( j7 i& X1 f/ V! D
padding: 0px;
; \ n# h' ?4 u% {/ X: S
}
- x$ g4 [% J; `# W+ o" A! d6 }
#pic{
`9 e8 j3 J T7 C
margin:0 auto;
: ]5 v. W! P. j3 p! P1 s- P
width:800px;
$ _" u* B ?: F6 G% O; o Z
padding:0;
5 k& c2 ?6 |$ _# `2 X$ T1 Q
border:1px solid #333;
+ u" c) z: M4 E& @/ q* M3 v1 E, q9 C
}
: f0 ~2 H+ a, P+ U2 ?
#pic img{
" d& R- G M9 k7 \% k: q0 z7 c
max-width:780px;
6 K4 `5 b$ G @
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 S' o. w+ b" q/ V1 I
border:1px dashed #000;
2 C. v6 ~4 k0 U. o
}
3 a5 `: B* {, A# l* w
-->
. w. ?; ^2 F; @: H$ X# r. G
</style>
4 _$ E+ f! \( A+ m/ `
</head>
4 A7 ^* L1 V! S
<body>
9 _* n# G+ l6 T% m) F3 C
<div id="pic">
: M; K; A" g$ U6 c' ^* u
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
' l; `; a, J; U4 l0 L
</div>
/ J$ o6 Y! K* g% D3 w
</body>
1 ]4 `* h" ~" C9 a. W0 z; r
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
