标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
- U& }7 _0 }3 j: G- ~& Z3 L
关键在于：max-width:780px;以及下面那行。
; i5 {+ Q( d+ g% t: ]5 ]/ Q
固定像素适应:
8 G) b8 w, |; g1 ~
% V6 L3 ? }2 g }2 R% 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> 以下是引用片段：
" {" L8 V- H) B2 N" Y9 Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 W" Z; b* h* @
<html xmlns="http://www.w3.org/1999/xhtml";>
( u0 f# g. \5 W0 ]2 ~! L
<head>
) c4 L9 P0 `+ ]# U/ f
<meta http-equiv="Content-Type" c />
, T8 R6 l% @1 s1 \2 |
<title>css2.0 VS ie</title>
* P1 y9 u1 l! w7 o
<style type="text/css">
$ q' e* ?6 e! K- I9 E
<!--
A( ?; A. S# Q# U5 x; t
body {
$ X4 `3 I& v$ l2 q O- S
font-size: 12px;
5 v6 Q, H' ~4 T* A- L
text-align: center;
: L; g2 p" p5 U" `# S
margin: 0px;
# ~. e! J) ^5 q; B* L
padding: 0px;
! I3 \0 K& f+ j" s; h$ b. P1 |! b
}
5 \# d6 {% `' H
#pic{
) t& N N% X- p r# A; G4 d9 U: j- b
margin:0 auto;
1 _$ s& I# N( o0 }) Y
width:800px;
0 V) L, S) L5 u+ X+ x1 `
padding:0;
/ f6 O6 Q+ c5 v2 G9 [
border:1px solid #333;
0 N1 n$ | `% i! y) j n* W$ G
}
8 s' @5 V5 e: o7 |& I! M' P3 h
#pic img{
0 A6 @! g) f' d% c0 r. B7 s
max-width:780px;
. ] p! ?7 o5 z0 W9 Q. f5 {
width:expression(document.body.clientWidth > 780? "780px": "auto" );
; j% u8 P/ l+ @) B) V% P% Y
border:1px dashed #000;
5 r% F7 N0 Y% h7 L) @6 j
}
. s. U& o/ Z& I Q' v
-->
$ O3 c0 z$ C1 l0 H) G
</style>
( _& r/ F2 I6 P7 h2 t$ g
</head>
, r* \* z2 ~2 j3 @/ d
<body>
1 g+ C" n$ V/ F" q5 B4 @
<div id="pic">
7 @6 M, y. ^4 T3 G1 s5 P: y
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
6 h; o7 }0 }; n/ r$ r$ M
</div>
) G3 z9 z5 O# s# r) X8 v7 J
</body>
7 n! A: m0 k2 j# f; G3 h
</html>
( t' I9 `2 S m& ~0 N
: j; d# M& Q( k
百分比适应:
" { a: G' O) v, m/ ]/ ?
以下是引用片段：
' h p2 x q" s4 y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ _/ ]. q: f7 T0 I2 Q: \( q
<html xmlns="http://www.w3.org/1999/xhtml";>
% i4 x1 t6 ~+ ~2 R; y" i' C Z' [5 N
<head>
4 S1 D& Y- L+ W& P% t+ s
<meta http-equiv="Content-Type" c />
2 |* h4 f+ o& {3 E7 V9 o
<title>css2.0 VS ie</title>
! C h8 H) T! d# z' [/ c2 ~1 ~4 v2 J
<style type="text/css">
; i( e' j9 r3 n) L( w$ o* L
<!--
6 l" P ?5 e, X& E" C- H
body {
5 H, D( y( `8 n2 }
font-size: 12px;
4 [* O9 f* z4 n7 \: l5 M& U
text-align: center;
& v+ I$ ^0 d. p L! D' J1 x0 E
margin: 0px;
/ x- y( r2 j% r8 D% [! e7 X
padding: 0px;
; Y$ }. Y3 y3 N
}
E) L0 B) D8 m. ~6 d) f
#pic{
7 c2 Y; r5 Y& A3 z# p
margin:0 auto;
' E+ U! N; m. ` ^; I( x' T
width:800px;
4 k: T! R# ]9 @) h/ e8 {: j
padding:0;
9 u7 _/ t; r/ J* s7 Q$ n6 ]
border:1px solid #333;
" E; l2 \+ ?4 \! N) ~% n# J2 g
}
7 r+ ~: M2 y; \* q9 B- F
#pic img{
# [0 v& o Q. O- }. R4 b
max-width:780px;
4 }% K* ~# t. g1 h, N4 e
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
! Z l* @/ n+ G9 ]5 b ~/ k
border:1px dashed #000;
5 y i6 @4 N0 I, H. k) ]
}
6 L. ^7 a' I* g2 J* ~
-->
: ? E3 _$ F6 g
</style>
5 B" Z p( I) c: W; r- N# t5 K
</head>
: y9 b7 o: U8 Y8 h$ u
<body>
. f |" `( e) G; q/ H7 I4 I# I
<div id="pic">
6 h! s+ f2 J0 X/ p. ^8 t1 B; }) K; J
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
\' b7 T' Q0 G1 v
</div>
9 ^5 I, `; P8 j' w
</body>
9 D( `0 }" F- p- M- v) [) ~
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
