标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
6 D% D! D. l% U0 U0 w6 u
关键在于：max-width:780px;以及下面那行。
$ F3 O0 t" l+ L1 e9 s
固定像素适应:
1 V4 [0 A! ?* f2 h+ G0 z' c
+ r, T9 D- T4 ]
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> 以下是引用片段：
! a: U- u" N/ @2 g& i) y3 |7 o9 J
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- X$ j/ J+ R3 [/ y/ j
<html xmlns="http://www.w3.org/1999/xhtml";>
% q4 w# b, N/ i& [. @2 m) U
<head>
6 s9 K+ d! {( w# r" n2 f- ~( \
<meta http-equiv="Content-Type" c />
: k0 ], M: b. I( F- I
<title>css2.0 VS ie</title>
8 i" v0 M7 |$ z- V
<style type="text/css">
* p* N& G! m% P
<!--
0 C. F- k2 v7 d. X
body {
0 v* z# K' H3 C$ G) p
font-size: 12px;
8 v( x. I& ] C8 u" [
text-align: center;
5 n$ a" ~$ X$ r4 u1 j! o E9 F# S
margin: 0px;
/ Y7 o: P% t( L8 v. `0 j' q
padding: 0px;
+ `; P8 w; E g& G! W/ [7 q1 h- |* r/ b3 B
}
& U+ j d& i1 F. ]
#pic{
" F1 ^& k* Y# X
margin:0 auto;
7 z4 o" S# \1 I. v c# r
width:800px;
5 L( M, N3 \, S) W! J4 [
padding:0;
2 F: T0 |. |3 g
border:1px solid #333;
8 g+ r- \ ]2 _) x2 X% R. ]8 Z, x
}
$ `8 P. K. n3 J% m# w7 U. A
#pic img{
6 p# n4 {4 H" h% I% A
max-width:780px;
5 \# q0 A' [( `) k8 r
width:expression(document.body.clientWidth > 780? "780px": "auto" );
7 x# x/ h5 f- l# k4 l/ t5 P! R
border:1px dashed #000;
1 T* K1 k& m1 c* c7 i
}
9 U+ ]# g9 }& R1 o; C f& U. N
-->
2 D) W' B0 M# @9 w) |) N
</style>
7 ] Q% O$ h* `( e. h$ y
</head>
& p, R' d3 \6 x* ]$ G: f, L
<body>
3 z7 f3 Z2 M& [6 s9 Q* f* l
<div id="pic">
, h* R9 |1 y& i1 D2 ` j
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
s. l1 u8 j/ I. J4 d: K
</div>
9 c" T# ~7 j0 u" y; s
</body>
, I h2 F5 Y& N9 ^
</html>
[* l; U3 R% e; R
: T. c0 ^2 E8 m
百分比适应:
- m) V! Y" U/ r, T% _% F- T
以下是引用片段：
2 v$ e) v4 b$ f- u- ^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ e8 v: `1 i3 f4 U1 K" W
<html xmlns="http://www.w3.org/1999/xhtml";>
3 c( J4 m& n3 Z& s7 u. g
<head>
: `" g0 z0 K" ?$ P+ R! a% W
<meta http-equiv="Content-Type" c />
) G y3 ?" ]3 e" |
<title>css2.0 VS ie</title>
, F5 @! B7 D& P, r) Y3 r
<style type="text/css">
: W+ y+ X/ P7 z
<!--
% ]+ S# B' ~& u* l) g
body {
- `7 V: I2 A* F" [
font-size: 12px;
9 O/ r* ?+ n! ^* R8 _
text-align: center;
; j, ^" T( k6 l, p, r0 W8 x8 c
margin: 0px;
; g- l5 Z, ]: l. | x7 ^! J9 T
padding: 0px;
1 d d& s4 L0 C, ]9 p
}
, H0 K0 ~$ C" N! m' J
#pic{
' e) S! X4 _- \8 q9 }6 p! s6 T4 j* V
margin:0 auto;
6 A( z) ]) L' J
width:800px;
0 O; f) r) n# k ?* a) r5 z9 g
padding:0;
# J2 N: M* N" J+ a0 `& G1 P
border:1px solid #333;
$ b4 A/ ]' R7 y) c
}
% E, @2 r' i) |+ g. h* H' S
#pic img{
, j, A8 u/ d9 I
max-width:780px;
8 _- n7 C$ o; W) o) m; }$ R/ ~9 |
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
( Z, r' b$ B( | V) I: y7 {1 S
border:1px dashed #000;
L0 f" r2 r. j% v% O/ X: D
}
7 H8 Z3 v f4 Y
-->
& |8 X2 F* N$ g$ Y' P
</style>
0 K4 _+ f+ ]: Q0 y( y" l8 O& H4 a
</head>
2 _0 w- W5 m; Q
<body>
7 b3 [, J W# g+ e
<div id="pic">
" ]6 ~6 z" f7 G" z1 T
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
! W4 H% v- R" P. Q
</div>
8 U6 ]$ _0 }' l/ o- p
</body>
' j7 E! b( }4 N5 B; m) f
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
