标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
# M8 O1 c4 ]$ @( l/ T4 K, p
关键在于：max-width:780px;以及下面那行。
) h: @# L0 T' j* o
固定像素适应:
2 B/ |& t) M* ^* T
I. |3 p7 |3 B8 q4 Q
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> 以下是引用片段：
8 t" z o1 H& f
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 k2 q& T$ R4 v9 C% G, c
<html xmlns="http://www.w3.org/1999/xhtml";>
6 d& i: @. T/ x6 p- k
<head>
. \* r# Y6 ]* i# W, \
<meta http-equiv="Content-Type" c />
( u* W3 a0 V" \1 V& I* m
<title>css2.0 VS ie</title>
w' f6 Z) c, Y5 q4 r8 @4 b2 {5 [
<style type="text/css">
& j# q9 N: I6 c! u/ r' ?$ f
<!--
: m( r; |7 n1 g6 L- b5 {
body {
n+ X! G! y+ ~ k
font-size: 12px;
2 W7 l. p$ H2 \8 b2 d' ]) ?- h: V
text-align: center;
3 ~( N* H1 R* v! L, m X; N; t* ^
margin: 0px;
4 u0 u. R o' D6 [* T
padding: 0px;
& |! [6 n, X T
}
) x6 E \% [& b
#pic{
" E* S3 F" H' R& a# A+ N1 G
margin:0 auto;
* |4 N5 [% F. ?" A2 S/ j O( }- ~
width:800px;
. v4 L, ]% b4 J: T
padding:0;
( }- L) ~5 S w) V% L% j
border:1px solid #333;
1 v9 ~2 U, h2 I8 m O
}
C3 ]+ |. }5 l6 Y
#pic img{
0 r% _( g7 D0 M0 B6 o; L4 {6 @
max-width:780px;
1 \) Y0 j) W( u& f- t% j5 f$ l) ?
width:expression(document.body.clientWidth > 780? "780px": "auto" );
+ T' v! D8 } A
border:1px dashed #000;
+ B& F, g0 y" K: r; \! ], A
}
3 K# Y; u% c! K
-->
# Q* V/ J7 P3 L% v `7 n" N" b
</style>
V1 @) |3 K9 a; w
</head>
* g. \, }+ ?+ V B3 D
<body>
! m* b/ n9 c6 T7 ]& q
<div id="pic">
. S `7 |6 V9 X1 L0 L6 {; P
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
5 ^+ j& f7 j& k; {7 l+ ^
</div>
$ d3 O) d4 |, K- R
</body>
5 P% L) ~2 B) y4 K: p! h$ u" k$ ~
</html>
* g- y! p9 t. Q3 r. a
3 b: e3 s9 O3 s
百分比适应:
! C0 C# H% Q0 y% F, W; L/ x. ~8 i. O- ^
以下是引用片段：
9 l8 l {6 m6 m8 u* h/ I
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 G; {+ y8 g5 C+ V! |( U% |
<html xmlns="http://www.w3.org/1999/xhtml";>
3 P0 z$ l v: ?5 `+ s
<head>
3 T; e3 Y4 `5 N7 E0 H9 h
<meta http-equiv="Content-Type" c />
9 z! s5 s2 w/ o0 b
<title>css2.0 VS ie</title>
, @+ r: k" R+ Z4 w" @8 }
<style type="text/css">
7 b9 j/ Z1 q5 o
<!--
/ ^2 h( }7 ?% V2 ` v- p2 D# A
body {
8 {) W% ]' S- |6 [6 c* I
font-size: 12px;
' r) T, w6 F* D) H* }! [! I4 L/ q
text-align: center;
+ T+ ]: c9 v! ^* B' U8 ^& J
margin: 0px;
, C( w2 t3 C0 W( t9 G% w& ~4 ^0 ]
padding: 0px;
. [4 x" ~8 f) d t5 I) i
}
H/ f0 S# `+ ? U( k4 `
#pic{
- A! s! i l+ I
margin:0 auto;
! T+ W- ~# `! |4 r' J
width:800px;
, l8 n- e7 M) d7 o8 Z
padding:0;
/ h% h% p* Q& g7 b y& D ~9 _( I
border:1px solid #333;
& ?5 X, q$ I: o% O" d/ u4 f
}
- f/ u! V" P& t$ [0 p7 u
#pic img{
+ W; \, n4 V& ~5 A( w
max-width:780px;
5 ]7 t9 G% \' D. N
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 \! ]9 Y! H& h; p- M6 q' P2 O
border:1px dashed #000;
' s6 Q. E. [9 [9 V
}
/ M+ G L5 y1 {
-->
/ S& @3 k% I8 N8 @5 ?
</style>
" l+ l2 g9 b& g' @, y
</head>
0 I0 s. k4 H4 ]
<body>
" {) e: Z7 x/ w& e1 }/ e# q8 L
<div id="pic">
4 K$ {+ ]. w$ W, g0 C7 c
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
5 a+ Z/ f+ O5 y( g1 I! b6 D
</div>
! l; R- u2 H/ [# `! N3 M+ o
</body>
, h2 k8 x* f1 j# @( {* e( A( a; `
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
