标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
5 X: H: C: _% K7 ^6 t
关键在于：max-width:780px;以及下面那行。
d, K7 }' h7 q
固定像素适应:
1 a r4 T w j, s7 K! x$ _
8 C% K* _0 G4 w/ s( G4 X" x1 l3 }
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> 以下是引用片段：
! \. J% u/ C2 l5 g2 i, r6 D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 d9 [9 H: A" E
<html xmlns="http://www.w3.org/1999/xhtml";>
( Q" V- g3 E8 I9 H K, z8 k
<head>
$ f' c& x( j) r
<meta http-equiv="Content-Type" c />
( t; A% m5 I# z
<title>css2.0 VS ie</title>
; A; c Y, G+ Y! [
<style type="text/css">
+ c& o g* c( C$ ?4 Q
<!--
9 `8 [" ~# S/ W; P$ z' j- G8 M
body {
; r$ r9 V2 d9 I# n3 v2 U7 n$ G' u
font-size: 12px;
& T5 I# L, J6 [
text-align: center;
- r: h. ]0 I g4 I
margin: 0px;
/ P! o% T7 O& ^' E
padding: 0px;
) ^( y" V; u; I5 A4 i
}
; @" t8 w0 w4 j$ T
#pic{
" w3 ?+ \- I J9 A% i5 C8 o' O8 I$ Y
margin:0 auto;
: v' J0 M( r+ ~& I
width:800px;
! L$ U7 S! V7 ] d5 e: {8 }
padding:0;
) E b: Z8 z! I* F& C2 D
border:1px solid #333;
+ A2 [+ Y$ r# b0 L
}
9 e! ]' _! r* r0 y- r
#pic img{
# @( B5 X" @3 w! s+ ?
max-width:780px;
' W" _4 D6 e' t! l7 j
width:expression(document.body.clientWidth > 780? "780px": "auto" );
# e$ ?) D, @4 Q# G4 F+ b& m& a
border:1px dashed #000;
- |( A! B4 K: r! k* D
}
3 Z. T6 Y5 X- S. n& i' B
-->
9 ~" N7 @% |: D3 Y G
</style>
* p* \8 H" N9 @2 W
</head>
u) m. ^# n4 w- Q# r
<body>
# L' K% {" ^: z5 A: Y' Y& a
<div id="pic">
; E( V9 i' y8 c+ ^8 g6 `3 Z
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
& w2 N% D0 {0 q9 C
</div>
1 `. j0 }' ?: N0 M# a+ h
</body>
. k8 G1 I. V; |
</html>
U1 K- H+ E# V) I/ p. [* q
% p' O; u$ N* K/ C# ^
百分比适应:
% L7 p2 R B0 N0 z
以下是引用片段：
- {9 j0 c& E2 s8 l8 W6 s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ L3 B Q$ b0 N6 a
<html xmlns="http://www.w3.org/1999/xhtml";>
6 M$ c" j- K& o+ x1 u
<head>
* d9 B3 u% r, M- W% h/ R* \2 c
<meta http-equiv="Content-Type" c />
' I1 B! E) [# ]% r! \- }) H* G
<title>css2.0 VS ie</title>
) |1 x1 v2 M5 K
<style type="text/css">
. T0 ]7 M7 \9 w1 E a0 y1 t' a
<!--
' }- q% y) H% s/ G2 O2 }6 P
body {
) R9 C% F- X) s/ `
font-size: 12px;
: k" }) f k1 n( V' f8 c8 T' |
text-align: center;
! l6 [, @& Q( w2 M5 G+ N |
margin: 0px;
! p* a! x; \/ n3 ~8 I1 b
padding: 0px;
( x) ?" ?( G: C. |
}
6 k& [* @' G: Z; n7 O
#pic{
+ i" m3 X9 X3 |, H$ v$ |% |8 U
margin:0 auto;
r: }# K% e4 D8 W
width:800px;
) r6 m4 k. }* O+ t& v3 |2 S
padding:0;
8 `2 k) C. L! B' C6 m6 w J
border:1px solid #333;
; f! j- n8 X3 p8 F/ O- X! V6 g0 H
}
/ `* O" Z" o. x! w* C
#pic img{
- I: G A: ~) r; f& T0 S8 p. v0 f
max-width:780px;
7 x5 R. N& q& l- b4 Q% |
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
# T, y; ~1 K; g
border:1px dashed #000;
5 u" S; v: v! A4 \7 {! N
}
2 |+ ^- _% ^ g' ]
-->
) h7 n, r( m% S4 Z- ~
</style>
4 e" V, n9 v b& E
</head>
5 ?# g0 t5 E: T1 L& A
<body>
+ g' j4 k( i8 T% ~ k3 |
<div id="pic">
" j7 t7 x/ r) \9 ~7 I
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
0 n! ~& ^0 d( f$ E/ q
</div>
$ R* L- |( q6 v$ u {/ d, e
</body>
8 t6 T. L/ S2 p
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
