标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' t! D v- U* ]. E G, v9 j
关键在于：max-width:780px;以及下面那行。
7 U" a$ x6 } v: a" O3 V# {' o
固定像素适应:
. n6 ^% g) Q* X2 L8 L3 L6 |
2 y* l$ q$ M( l. c7 Q) [2 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> 以下是引用片段：
7 l4 V" W7 ^2 U! J. U: O
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 h5 U( R: x# f0 n5 Z, \ i
<html xmlns="http://www.w3.org/1999/xhtml";>
" f1 Z5 \& K6 v7 e/ m0 v( Y- c
<head>
" `, D2 R0 F1 _8 k/ X4 y5 {
<meta http-equiv="Content-Type" c />
7 w7 F* j9 V7 `
<title>css2.0 VS ie</title>
8 Y9 ?1 n6 Q; `. U) S; g. W; J
<style type="text/css">
9 Y* X5 B! s) }8 z% g/ E3 t
<!--
! J4 b6 X& H2 [2 `' t, Q" S1 D
body {
% B$ ]* Q0 w4 U! K5 o
font-size: 12px;
9 w! |1 X4 u! Q, Y
text-align: center;
7 v4 F) i% m& x4 J3 G5 H. @
margin: 0px;
. Z2 K5 F( D+ ^' g4 C0 L6 O1 W
padding: 0px;
$ t- |, b$ }1 n1 n
}
& \/ Z- H+ j9 {! _7 p1 o" Y }
#pic{
& k0 u. P0 ^9 C/ g
margin:0 auto;
5 O0 f) T8 u0 X# S/ Q
width:800px;
# S5 q$ N( C0 z
padding:0;
& W- |; \: U& p0 t* S1 z
border:1px solid #333;
' V8 s: U% K* r& _1 V0 ^
}
* b3 |8 d- Z% g4 v0 @0 t7 F* i
#pic img{
# ]. G. H* N/ ^: i! r- b2 n7 c
max-width:780px;
) T* c' Y ] h, E2 z
width:expression(document.body.clientWidth > 780? "780px": "auto" );
; w; g7 o3 k8 C% N
border:1px dashed #000;
/ F9 X) A% Q% q( |/ ]$ y
}
* x/ i) y" j/ I4 {, G% S: [
-->
^' q9 J" u/ u* C
</style>
. N3 T8 O! s, j; E, z y0 m
</head>
( A5 J$ N+ ], x
<body>
8 T' q9 I% F4 {0 e4 h: }& R
<div id="pic">
! Q& J6 i' l/ ~- z& o# x
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
$ F* @6 j9 {/ S X' }7 l6 u
</div>
0 _" M- D$ p1 @0 v
</body>
) l" a; l3 M. I4 C9 s( D
</html>
; i+ B% U& B8 B2 e& d
$ }' Y7 a. o. x. N+ E; Q* U
百分比适应:
4 k/ H5 d+ O$ A8 `( P) I( E6 |
以下是引用片段：
. B! r3 [$ P6 B! y- _
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( H5 ~! j9 c8 D: r7 |4 D$ A) U$ g3 N& c
<html xmlns="http://www.w3.org/1999/xhtml";>
9 L+ a0 ]/ K7 F' M' ^( m" F. w O
<head>
3 B2 Q9 s7 h6 u; y$ H. O+ q( G
<meta http-equiv="Content-Type" c />
! b F% A4 F1 g, P- n
<title>css2.0 VS ie</title>
. R R2 X' b# K8 B
<style type="text/css">
6 t2 S. H4 ~6 R: ?. Y
<!--
1 F# D9 e3 T1 Z# {: l2 Z
body {
# V0 d; ]1 d# d+ J/ ~
font-size: 12px;
% G5 h( f6 f$ i% Z3 X# t" Q( ]
text-align: center;
; t% C6 f9 _# `2 D
margin: 0px;
' G" ~4 s8 y& f$ F
padding: 0px;
; R2 J4 K2 s3 S! h4 X6 M
}
+ o! P$ V* V$ a/ h& \# k! U* g- y
#pic{
1 X1 P0 H3 z1 s- H, h1 e$ n
margin:0 auto;
, }9 |2 H5 v, i% m. d: h3 C
width:800px;
3 ^& f: P1 R+ {6 U8 [) y% z
padding:0;
" R( Q1 Q+ u9 [! I! g
border:1px solid #333;
% z5 b: k& G, @, J: N, {: U* e
}
$ |4 x4 G c `) z7 z
#pic img{
' r) Y% w" R" K- q# J
max-width:780px;
# p5 \$ a* D" M( b/ F/ P& N0 D) y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
3 e; W3 R/ x- \, ? U3 O
border:1px dashed #000;
9 U/ D( y) f/ b) h
}
& F2 f' a7 Y# J8 c
-->
' |8 _/ f* l4 D
</style>
/ z+ A) B: ^) x% e% \2 I
</head>
# b. F. r. s0 f! r
<body>
, I! a+ L# f& ^% U; n3 o
<div id="pic">
/ M' E' v& w9 L) M6 K
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
( N0 n% J H1 k9 U4 B, m7 B; }
</div>
- P% ^0 a3 h) t& A, F4 u; P7 O y
</body>
2 q& k7 q; _7 W+ s
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
