标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
& N9 G8 q! h/ N0 A1 _
关键在于：max-width:780px;以及下面那行。
2 T9 h+ W0 {$ P4 ^! R) p$ r# C+ {
固定像素适应:
( M" w3 t0 U& S9 v
. j% l3 P" W- x# T5 q* U" z
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> 以下是引用片段：
! [6 c8 b( A! W% e/ j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% |5 q, a% _5 v" q) J. I
<html xmlns="http://www.w3.org/1999/xhtml";>
: j; v7 P7 S% x6 p7 b" w- q
<head>
+ K9 Z: o: ~. f# _7 P
<meta http-equiv="Content-Type" c />
( l i( S6 \/ E! `% E/ J4 p* s
<title>css2.0 VS ie</title>
9 m7 ?3 w* t7 G! E9 [5 c
<style type="text/css">
+ V; q% e0 b- l$ y* W4 \: y
<!--
! t- ^9 ]! p( f
body {
# a- Q) |7 ?/ w8 K& E. z/ h8 }* N
font-size: 12px;
' T3 `+ u. E3 h" R% X
text-align: center;
. `( |- g: {* Y1 E
margin: 0px;
) Q6 y# k4 r9 E. J
padding: 0px;
+ R( }; y+ @0 K3 Q: r9 g3 S( ^
}
) ^7 w3 M/ H% O/ m8 r$ l- m
#pic{
% R" ~* |9 ~! E; ~- H& O1 g7 o2 A
margin:0 auto;
. I# P* v2 |( y3 b8 i, ?; K
width:800px;
5 n4 {% l4 H7 B/ s5 c
padding:0;
# T# y$ w& B/ ^9 v
border:1px solid #333;
4 u) ?4 e' ]7 y8 E. Q' ^$ Y
}
( P4 `7 k6 E ~/ M4 Z7 |" R, R2 \( I
#pic img{
/ r. ?$ Z3 ?/ L
max-width:780px;
~$ r: J2 A# E, j! B/ h7 F' g
width:expression(document.body.clientWidth > 780? "780px": "auto" );
$ L( J# n; p+ F( K
border:1px dashed #000;
' [( Z( @8 p4 x; O* A/ N: C; y
}
1 O6 r& U7 K3 a6 `7 Z' |5 f) J
-->
( X# P2 I4 _, W' d/ c5 U
</style>
/ L3 W0 }. C1 n: }
</head>
( ^0 y$ E- H, I j; U/ z/ f& J/ c$ _3 Y
<body>
' t8 Y. D) N4 |3 x. K4 Q! J
<div id="pic">
9 J' g# R5 q9 ?7 i
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
# l$ L: [$ c l3 {' _' A6 ~
</div>
2 X3 c$ q" h6 j& Z2 W/ ?. O
</body>
) o. ~3 ~- {- Z3 r, J/ M0 a" w# a
</html>
& d2 T" }2 X. P- p5 i9 E
7 f" m% u7 f& E6 J, O2 I9 S/ Z
百分比适应:
4 d" a6 e5 J0 T% N/ [
以下是引用片段：
* s2 o/ @1 c% Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" m8 Z' S8 v. ~
<html xmlns="http://www.w3.org/1999/xhtml";>
/ H& N& }0 J+ C ]! d: p, G1 q4 N
<head>
& B' y) j) l9 ]4 n! u% z; Z
<meta http-equiv="Content-Type" c />
9 g3 X: ?+ L5 p# y6 e
<title>css2.0 VS ie</title>
4 j' e7 j! k$ I" `
<style type="text/css">
- L* B3 q5 E) d
<!--
" _' m. ]0 V0 Q. y
body {
9 \% ]1 z2 I% W
font-size: 12px;
8 |8 H% V" S8 ]2 t9 g; ?
text-align: center;
0 t; b- ?/ \3 p
margin: 0px;
- ^. m2 R* O. R6 ]% l( O8 F
padding: 0px;
) H5 m2 x/ ?$ F. X6 h1 y; C
}
5 t3 ~- w6 f+ n- ]8 l; |9 r9 `
#pic{
& q! _& u/ Z. ^$ y& q9 @
margin:0 auto;
2 n$ l, q+ S( s7 d! v m4 x
width:800px;
& j* v3 R0 ]) r/ W3 V) n
padding:0;
+ X3 M. \% f0 X/ B
border:1px solid #333;
4 t! N4 M8 |) J# z$ ]; J
}
1 U8 ~6 @5 {! o7 w7 f/ u K
#pic img{
& ]' F- f: K# L6 E! S/ X6 u' P
max-width:780px;
4 T% w: T3 Q1 F
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
6 }: K( X3 D; D
border:1px dashed #000;
( }* [( d6 A+ R n
}
, M* _. T( i' L/ G/ V6 M/ d
-->
1 x6 P3 _; g4 G. U4 v, ]
</style>
5 f% q' u+ g) ]5 X* E. y+ d
</head>
+ \3 c9 T" e5 O( h% U) Y
<body>
& h, C, D% u& ` U0 z
<div id="pic">
3 j, K9 f0 u# _* L
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
5 o- v4 R# H' ^( p6 o
</div>
& k, B5 n/ x% i# O( u$ `) A
</body>
5 w6 F6 E F6 f7 `3 a9 r
</html>
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
