标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
5 w. @8 O- }6 P" S# `4 J
关键在于：max-width:780px;以及下面那行。
) d/ W7 {1 c$ F2 p7 Y# h
固定像素适应:
5 ?: y% t; u/ P; H. F3 q
5 |2 V% F4 R6 o* s: S" @! r& b
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> 以下是引用片段：
* }0 |0 z" Q/ `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" R+ b7 o- [1 P
<html xmlns="http://www.w3.org/1999/xhtml";>
/ L4 @ v2 ~1 `6 P
<head>
! y/ S) @' n: z; Z; N& c
<meta http-equiv="Content-Type" c />
2 _5 g1 i4 o4 n; A
<title>css2.0 VS ie</title>
( G3 \5 c* V! P
<style type="text/css">
2 j/ {+ a( Y" T5 }- n1 J& O# b
<!--
! C, f8 V" V5 W+ z
body {
! v+ k# ?2 r- e& t
font-size: 12px;
. V8 k/ J+ L4 H
text-align: center;
8 @5 ?; l/ {+ H/ s+ C6 o6 Q/ s) Z
margin: 0px;
7 n+ X6 e" U+ \' L+ S( P
padding: 0px;
- o" P2 T: q P- u; Q. t/ N3 T# @& h
}
/ I5 c5 g" W, [
#pic{
7 h1 `" P7 P5 z/ v; ?
margin:0 auto;
+ Q$ d5 F- h: p" ~: }
width:800px;
! T/ H) R( [' x: O7 T
padding:0;
8 Z( f1 i! K( q( v T' ^
border:1px solid #333;
2 Y" F4 _5 A9 _* N6 G3 F' i
}
3 }6 P5 w& K W8 C `
#pic img{
* N- [! m# V Q" p1 u
max-width:780px;
' I. j' k$ C9 c/ s5 i
width:expression(document.body.clientWidth > 780? "780px": "auto" );
# C/ E* k0 R: K1 V P6 D
border:1px dashed #000;
! `$ d+ U; u0 w, M
}
. y m9 V9 ?" S( M1 M- b
-->
4 i! S' e5 v c8 X9 T9 ~
</style>
v/ {4 S5 x3 P8 b
</head>
+ r" h2 N8 f$ g( x
<body>
0 f0 D! a* _) [4 I, |8 N
<div id="pic">
$ R$ l! Z9 D" E6 v" O7 a! Y
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
4 O' G% k5 q8 t3 J* Q I5 _
</div>
% w2 R |/ W. N+ ~8 K+ P
</body>
: K2 X/ f) U& m9 k8 `
</html>
+ y# b" M! |' c9 s$ k
7 I( P% [/ i4 t2 O/ g
百分比适应:
0 M1 f; w! |" I( u
以下是引用片段：
2 B0 Z$ w# A- i3 v! G9 t& ?( o
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" f0 [: u1 M9 w' l
<html xmlns="http://www.w3.org/1999/xhtml";>
" @, y7 T. B+ A9 U& R# B
<head>
# N4 P( y# _# L' j2 e' U. i$ B
<meta http-equiv="Content-Type" c />
# z3 i% X! f) r" M5 N' u
<title>css2.0 VS ie</title>
7 q: Q, E; m9 Y$ C
<style type="text/css">
4 s) E7 [: F4 C- Y9 c( u5 c+ W: |
<!--
0 I" K; c; u7 y' Z; V+ o
body {
1 E6 ~' T# X T, t4 X$ I
font-size: 12px;
: }- {8 z* j; z6 `' _$ h+ D+ ~
text-align: center;
$ B% U }' { Z* r. `) Q. y* F% a
margin: 0px;
, A) H9 m% |- j' i( f3 K
padding: 0px;
! ]6 h1 Z0 I- `0 O P; @3 @4 }
}
6 l& I% d! O) B- G0 |
#pic{
1 }7 b; W$ K( e# I5 ~+ S- C
margin:0 auto;
3 A1 b6 z- F0 |) w! e* ~8 u
width:800px;
0 b2 L! _8 x5 ~+ s# M6 z
padding:0;
( N$ j4 G$ _2 l; Y5 U4 ?
border:1px solid #333;
& A8 }9 f3 b# ?* e
}
( p: Q1 [0 G+ Z1 k5 p
#pic img{
) J/ }5 z3 U) K/ G
max-width:780px;
; g( n4 K& Z0 s2 ~* Q
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
B# f" w/ R, P
border:1px dashed #000;
* q ?1 Z8 c$ D, }
}
% a6 M' @) l/ y* ?* g6 N# z
-->
4 Q9 ~# T: y+ O% S
</style>
9 {4 c4 y5 A3 o, o( D: L7 M- C# D
</head>
0 d6 F( N7 U5 b( V
<body>
$ [9 s" v0 t2 H% i( K! v4 W
<div id="pic">
% g! U6 A% L1 d! Q: | i
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
' A& S& i; k8 P+ z
</div>
9 P: M/ k' M3 s3 ]) @& z5 }- K* v
</body>
% T* @$ P( ^7 J/ P9 |2 N, T
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
