标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
% q: u& b q8 G' J1 w
关键在于：max-width:780px;以及下面那行。
: B/ Z* P: `- c, ]2 h* c7 n
固定像素适应:
3 [; z9 N* A9 x+ x
# a5 T. F; z# B6 ^/ i
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> 以下是引用片段：
1 G" b! O s* w( h, {! I
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 M% ]& u4 y4 r5 ?2 j
<html xmlns="http://www.w3.org/1999/xhtml";>
& e! Q1 _, C( y
<head>
$ u4 S0 P+ N; k
<meta http-equiv="Content-Type" c />
+ r4 G b; L9 s. K/ C3 B
<title>css2.0 VS ie</title>
! `) P& K- h; v3 k
<style type="text/css">
. T* |, `! ?9 F
<!--
@* m; M3 C* F4 U
body {
5 W3 ?' J. n: l
font-size: 12px;
( O$ V& a3 O4 \3 p5 z/ N
text-align: center;
- X& b2 w, C6 _
margin: 0px;
9 V2 T6 p/ B$ a7 t5 ^9 Q; E
padding: 0px;
: Y& m5 s6 ?, f) m! J0 u+ ~* A. f
}
5 b' S% o/ z1 j% o* }# O
#pic{
, E5 b6 [" h$ I5 t
margin:0 auto;
* @8 k9 C* p3 Y' k+ D
width:800px;
- j9 H; T0 Z! a: E# d
padding:0;
3 u6 J- B, i* W* s+ ` L/ q& v
border:1px solid #333;
. F: B$ C# u% N, _6 }+ G) U
}
, z: ]! b# C) }( S( J. E# j" G. g' w
#pic img{
4 D6 O' q( ^" j9 v8 c- d4 k+ H
max-width:780px;
$ E4 V' F; _& X) L( ^
width:expression(document.body.clientWidth > 780? "780px": "auto" );
D Y; x( n T
border:1px dashed #000;
+ s Y& m6 o: p9 [" Z& o, x" d( @
}
% v4 g0 Q- q% N1 k# }2 M) Q& P
-->
- B+ E: v; f; h! C: d+ z6 v
</style>
; `9 s( k. b" F
</head>
; M3 E# _/ p7 e$ F$ q+ A
<body>
6 h3 R1 q3 P( e8 Z& u+ s: d( I
<div id="pic">
( \6 _9 f+ j: X$ @2 J9 A8 @; H) B- _
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
; [/ T7 i \9 q w+ w, E$ d
</div>
3 z, T/ r: l8 ^8 _5 O6 `7 o
</body>
( I- w5 l/ M4 z% e! `' g
</html>
# t$ j$ D* C2 |& h8 A: h4 U
X7 p2 O2 W! V% `/ s
百分比适应:
* N4 c; l" `% H0 J- z" k3 G
以下是引用片段：
: U) |5 `( A h/ \
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; E; i8 l' R( @' Z+ x0 a
<html xmlns="http://www.w3.org/1999/xhtml";>
$ A2 g) D, |% W5 l j7 m2 x
<head>
: y. d( h$ V+ J: ^
<meta http-equiv="Content-Type" c />
% d$ w, P7 t7 r( `$ l& I
<title>css2.0 VS ie</title>
# b/ A c& F% ~8 I- l
<style type="text/css">
: I) Z. C: i# W
<!--
! o9 p L% w4 z& ^6 i
body {
3 U+ v# V ~( c, _: s
font-size: 12px;
9 z- `& o2 j# U
text-align: center;
x" ]/ L! e8 b# ^2 f
margin: 0px;
) m/ M: U) E1 T7 Q7 g* s
padding: 0px;
% P. O8 p' A+ ^! b
}
5 |# n v6 _. p
#pic{
8 h$ v9 d7 k# Z
margin:0 auto;
) t, x+ j' ?4 L3 J' K! p
width:800px;
; ^3 j( \; u( W" I* p
padding:0;
2 S0 k/ B' r% n% c; @! C
border:1px solid #333;
: d! k% ^5 G9 A. y
}
1 n+ M5 q0 B# A1 S
#pic img{
- u2 I" h3 b+ [) e6 Y
max-width:780px;
8 D: r! T$ W5 P" p0 \6 O
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- z3 Z, ?2 d# \7 r
border:1px dashed #000;
# G& g* K# `9 ?! z* f
}
W" O3 K& O( Y' Q, T
-->
. a3 E( P9 I' p3 W( L
</style>
8 a6 A' j& i* H/ g- `1 r
</head>
+ l- D8 h9 L: x( q$ i7 D4 Y4 P) G
<body>
\# Y' c, f) ~, ~7 X
<div id="pic">
% w( S# w* r6 j1 Y# m
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 i7 D4 ]3 w/ b0 h4 q" R. e
</div>
5 g2 x T3 w$ z
</body>
' h" H6 o) Q" T! B
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
