标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 k+ [. i6 ]( P: w' c U/ _
关键在于：max-width:780px;以及下面那行。
) L1 [: g! g7 Q, p* U1 v8 ?1 u4 U4 A
固定像素适应:
" }- w" A1 V2 ]! E
2 a, o8 h2 c$ H6 S: V) _, L
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> 以下是引用片段：
' Z' j( A1 I" x( }( X5 ^$ N
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# J( c6 W8 ]! A7 n6 b
<html xmlns="http://www.w3.org/1999/xhtml";>
5 f$ G3 y) k% T B* z0 Q. c3 |5 a
<head>
* {6 } i) ` l. B
<meta http-equiv="Content-Type" c />
3 i2 f+ i- D, Y. Z
<title>css2.0 VS ie</title>
# n; ?; r; b5 K3 _2 F8 T
<style type="text/css">
, n4 {/ P6 D5 R8 N; J
<!--
( z& p% l' Z) m- y" r
body {
3 W/ D1 _: ^% _
font-size: 12px;
; Y9 y% V" J3 S) N2 R* p8 L
text-align: center;
# {5 n. L' {" w+ f( ~
margin: 0px;
9 P6 f& n" b) X* u& t
padding: 0px;
- u, G* j h- I) W$ i4 y* C, ^
}
5 g8 x1 ^1 `- F6 i4 S3 X
#pic{
' `% M2 U, H/ A5 k- v3 a% E, {/ K
margin:0 auto;
l: s+ k* B4 |# p( l" M! M
width:800px;
r: `4 c4 `1 I* H8 f
padding:0;
9 d: ^: A d4 X8 @+ v! v
border:1px solid #333;
9 Z. w1 E, d+ E& n5 C- U
}
2 ]8 p$ P+ X* K S) J7 v/ e: \9 D
#pic img{
" H7 \( ^# r% ^$ V- t7 E2 T( U
max-width:780px;
, r; p0 c u4 P, M9 k
width:expression(document.body.clientWidth > 780? "780px": "auto" );
' P0 x; d2 _" L5 A
border:1px dashed #000;
1 U* X, p J: ~6 k6 E- L d
}
! w3 X5 ?8 @) E9 `, v# G4 l+ f$ \! T; b2 O
-->
" @9 [- O L7 o
</style>
2 V. Y7 C! }1 n! t0 A
</head>
" h3 E3 h. x; p
<body>
; [! y1 h! o0 m( T
<div id="pic">
9 g! G4 n8 z6 d, N7 l4 E0 \
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
$ q; G% l7 w$ O( \5 o4 k; X6 A
</div>
/ V& U' M) s6 Q2 x0 v. p! z1 _
</body>
' m4 [ F3 k6 {5 j
</html>
/ ?, R \8 M0 n- y) x0 N
t9 v5 x! H e4 t5 c
百分比适应:
. \0 M9 F, h8 W5 L- [# Q. H4 f3 ~
以下是引用片段：
% [! c, C9 m, f2 C Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 `( ?. G9 \' U" @3 C5 l
<html xmlns="http://www.w3.org/1999/xhtml";>
+ }, l1 X5 O7 I- \9 d
<head>
5 R" I) @" e5 m4 C4 ~6 ?" Z
<meta http-equiv="Content-Type" c />
: l; E; f: ` K# I
<title>css2.0 VS ie</title>
: l9 b' N$ X$ X1 R
<style type="text/css">
& O; y+ U& |/ I* J& X" m
<!--
, u& p5 ~$ G3 ^4 |; j/ j
body {
. P# x& D/ @; L$ y0 Q+ C! S
font-size: 12px;
, G) l) T( L9 Z) A3 g& d4 G
text-align: center;
4 R- n0 H! H) O) c% g% A4 Y5 h4 ?5 I' z, V
margin: 0px;
6 R5 ]) c: t# p% S4 ^& R
padding: 0px;
6 c% B) Q( u8 v+ v$ @) J( ]
}
) F% G! C; ^7 Y% R: [" O/ ^
#pic{
L2 @( F, M7 @& X/ [1 K/ d
margin:0 auto;
. B4 x+ E+ \' F8 r
width:800px;
5 Z m% p" C$ W7 I$ {
padding:0;
! l/ Q; B1 p+ Y8 s( F/ z
border:1px solid #333;
& X+ f l9 F8 v% t1 i5 c
}
* _" ]+ E) O/ \& `" v6 }9 |
#pic img{
( K6 W3 w& h. r4 L+ S
max-width:780px;
% R& h0 o3 b6 f! @
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
" ]& V; X: v3 G3 j2 J
border:1px dashed #000;
. O& _; p1 J1 l' a
}
7 D- g. G: G( C# z& v- B J) g
-->
+ c1 j6 i6 x& b h _( Z% j
</style>
8 U9 Y% I, _/ ~3 L% Q# k3 m
</head>
: U$ O+ S2 w6 n i% r2 j
<body>
1 C8 A% q6 J. a$ \" C$ S. M# o. X
<div id="pic">
( \/ i; J5 }7 y6 i
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 u$ `% W- k4 ?2 d* C8 ^; \& U
</div>
3 b3 w0 g. l% V) d9 \- {
</body>
/ P# O9 ]: I. A) Q7 J
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
