标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
7 r) D9 O& v- s7 S0 J. h2 V
关键在于：max-width:780px;以及下面那行。
/ r. u2 x, s/ f9 Z4 G( C
固定像素适应:
4 ?) K3 g0 y- M; K [' F6 {
. _+ e3 E; ~. b! A* k' h5 E
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> 以下是引用片段：
; i; L$ x! t1 Y- a0 f
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* n. z& {; z* ?+ \' Q0 t8 c4 v( ^* ^0 V
<html xmlns="http://www.w3.org/1999/xhtml";>
a: f2 r3 z; k) ^- I! d' {' h' A
<head>
& i; {$ y: Z4 O2 ]1 v: _
<meta http-equiv="Content-Type" c />
; A& k1 T. j* S! l# Q/ b: ^: G
<title>css2.0 VS ie</title>
$ O2 Y4 H1 z# `' ^: d
<style type="text/css">
2 }% m1 u/ W$ |
<!--
- b2 `, [* i5 G: u
body {
# K& {7 u. ]3 F
font-size: 12px;
6 ^+ W$ M+ z2 X' T3 Z* I
text-align: center;
4 B( h$ ^! O" Y+ Z' U
margin: 0px;
/ D( [" k0 q. {# k. ~
padding: 0px;
8 |% p/ E4 d2 K0 r1 Q# @
}
4 H$ z: {5 b# ~- d0 r3 z
#pic{
6 C' C6 |& q" t1 n! l
margin:0 auto;
" x; @1 y0 i8 @3 W! Q2 K
width:800px;
" y5 v1 w0 }& J* m& e: E
padding:0;
: a* F$ w, ]- r9 e7 v+ Z
border:1px solid #333;
; q2 q* [1 r3 [& `* T
}
# O0 ~4 ~4 l) F q
#pic img{
7 N1 j3 p2 ^( m5 h$ a2 w* V
max-width:780px;
: F4 U/ ]7 N0 d+ T
width:expression(document.body.clientWidth > 780? "780px": "auto" );
7 Z ~' j# c# Z" _1 I9 m
border:1px dashed #000;
* d# N5 H+ H& C! h( e* e. D
}
/ k6 K+ f1 \, V$ ^
-->
) i. k+ K- M, s+ C! p3 D
</style>
% }( {* y1 M0 w" |
</head>
9 C' k: h5 V0 K$ E4 C/ B8 G+ l0 R
<body>
$ g1 ~# m* y/ q- U( K4 U+ a6 r. x% P
<div id="pic">
. y7 z y- s0 h
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
% l6 [/ g6 s4 W% {) R
</div>
9 z: G+ p! C/ x/ }9 G/ m- }
</body>
$ A( K8 ?$ S4 p$ N$ C" o# g# j
</html>
* C7 H. l/ j/ N6 G
" G1 h u9 D( Y. X. M# E; S& W
百分比适应:
/ }/ Z Q+ G8 r9 P( j
以下是引用片段：
" c" \# T. N; ?0 k% p; C8 D' p
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: z# I" }5 D$ H# O: e
<html xmlns="http://www.w3.org/1999/xhtml";>
1 F$ w1 H8 [9 S
<head>
1 N7 V- _7 P- b$ x' Q
<meta http-equiv="Content-Type" c />
5 O; \; `) j) m: ]6 ]3 _: s
<title>css2.0 VS ie</title>
1 J$ J, V1 H1 Y
<style type="text/css">
1 U8 u% i6 b5 n' _1 s- E, o9 N: c; x
<!--
d# A# u7 o# S* J' T/ u
body {
1 d! Z7 ?9 F& D
font-size: 12px;
4 h2 {, a) @' B$ ?4 U
text-align: center;
- C+ R& ?) @( b' u# u) G8 t- W
margin: 0px;
. x S" a& I' l1 \
padding: 0px;
) {5 i7 p0 p$ Z1 y/ f* E3 X+ C9 T
}
! D9 H+ D, r, m- @! N3 m6 n
#pic{
O1 u9 C; O. o: `) k9 m: v4 I; x
margin:0 auto;
) d% Y2 e1 f5 D2 B. N* O; ?% V6 K3 a
width:800px;
b& P; m, g. C0 h/ j! ~8 m
padding:0;
4 D) f4 U1 j I) M
border:1px solid #333;
1 W; \2 ]3 c2 o" J
}
4 u, A0 H. P+ p/ s
#pic img{
0 N2 I# h2 Q7 L. K
max-width:780px;
; ?! J& ^# w5 D) M4 B
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
" k2 K1 v) U" x0 P5 \+ ?3 B6 ?7 I
border:1px dashed #000;
+ L3 Y) Z6 E$ m9 |
}
7 L7 l) `' H2 W% ~8 P& c
-->
1 }) m- U/ Z* e$ N8 n0 W" j8 w
</style>
- z3 d4 F( m+ C* n; o7 A4 G; O
</head>
* O6 s8 }8 w+ |/ {/ _0 K: m
<body>
0 {3 C/ ~; G" r/ I4 \$ f
<div id="pic">
: T+ k& c# B' ?# M( G1 \7 a: J
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
, [+ l3 P( e: U7 f4 F; P! y
</div>
' S. q- b/ U8 k' e& I
</body>
: u' A: ^. p" }* }3 M b) r
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
