标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 B2 x: l; g I
关键在于：max-width:780px;以及下面那行。
+ e8 ]: d7 Y: A! @9 ^+ j
固定像素适应:
8 P E. [9 b9 g) l& s8 T% _# G, D
( B: v3 A9 L: y2 c$ p1 N Y. d1 _
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> 以下是引用片段：
9 ] K9 q7 L' ~& o3 ~9 B O9 y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- j) M$ ~) d4 l. f6 U9 y$ s
<html xmlns="http://www.w3.org/1999/xhtml";>
" u1 c+ d R; I) Z) d, c+ h
<head>
# G F- q9 \) M' s0 H. v
<meta http-equiv="Content-Type" c />
6 }1 N6 ^( B- o+ K
<title>css2.0 VS ie</title>
* q0 g! U) j, e+ [, Z' L0 S
<style type="text/css">
0 V! o! W" C t* J2 T& J
<!--
! a9 Z# E0 [' k% h
body {
; i1 Z! ]8 C! N2 b' T, X
font-size: 12px;
. \$ I! Q3 u7 d& N+ i0 e' ^" n
text-align: center;
8 L; i/ s# B7 P' v1 v! O% O7 J
margin: 0px;
! H- A# y2 p7 U5 u9 O+ i
padding: 0px;
! ~- h- c w5 y0 m( f) P; ~
}
& j6 u/ x- i' a6 _
#pic{
c) G7 K- i2 L. w
margin:0 auto;
* p& c* z* i8 R, A5 G
width:800px;
2 K) e1 K3 w2 C2 a N& w4 C
padding:0;
" F" |3 n" t$ p( v* g3 W k
border:1px solid #333;
9 x7 J: g% Z- H6 _, D: K
}
# X* o O3 \( z) z3 i
#pic img{
Y9 D) |+ C- r+ ]8 z
max-width:780px;
9 n* S* h6 `+ f7 ^, x
width:expression(document.body.clientWidth > 780? "780px": "auto" );
5 \' `( V) W! v8 [$ @
border:1px dashed #000;
- C2 z8 Y$ _3 t( b' D" R: v
}
# S9 v+ _- d# \. G# n' X
-->
" `* A1 C" v* U$ e" s
</style>
! ]. u+ R. G% O+ j- W
</head>
/ S' a7 U* p8 ~% P4 m- B% l
<body>
9 ~1 A2 _: J3 n7 c3 j+ x
<div id="pic">
+ U0 m. y$ T8 c% y
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
9 e# t) ~0 r& |3 @3 A# B1 v2 ]
</div>
- P% K- K' k. h8 k5 }( z
</body>
( C' n0 \* d6 Q7 {$ M& [: v
</html>
( E6 V5 w8 p* p6 q$ e
! E3 X/ I6 r( _- X( Z9 h3 D
百分比适应:
1 K8 l8 F$ @' q8 T( h: n
以下是引用片段：
5 l! N7 ?8 S/ U1 a. n, L. ~. Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 q+ g% G( O; C2 o, O! m1 h d
<html xmlns="http://www.w3.org/1999/xhtml";>
f5 G+ V1 g; u* b! s2 M
<head>
5 f' }. u6 B. n. `5 f! E
<meta http-equiv="Content-Type" c />
; m4 B" G% u. ~) Y$ F9 H, \
<title>css2.0 VS ie</title>
3 U" O% Q9 b+ \+ k: \( q; m
<style type="text/css">
2 T/ ?# P O& F
<!--
/ x7 @9 t: `& w; G! i8 Z1 o
body {
2 T- U- p! L! T$ ]" K' A
font-size: 12px;
) b- r$ b+ A" f) i
text-align: center;
: G. ~- Q3 R, S( D7 Q
margin: 0px;
. g7 X5 h, U0 D/ C' l* Y
padding: 0px;
+ V( V2 r; s) ~3 H1 V D
}
; f# o: I# T8 t" M1 m3 H) \9 d
#pic{
1 |. B/ j9 I) U
margin:0 auto;
( }+ T5 Y, b( U5 J' t0 R3 e7 h
width:800px;
' L/ {+ o! b: X5 O8 l
padding:0;
, x; V& ^& W6 S9 J/ m
border:1px solid #333;
9 t+ X- o! u# @
}
( d. n# Z. f% n& X
#pic img{
/ }+ q/ U# Q' P+ x% C" M
max-width:780px;
0 }2 o0 \ Q& j, N
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
% S' ~2 t1 |& N
border:1px dashed #000;
" }' T- x) u$ L7 ]) M; \
}
! [8 @* r3 b0 X" H
-->
3 M; M- K$ v7 O K. [- h1 a& p
</style>
) E. p/ [$ x* F J9 w; v2 C- `' ~7 U
</head>
# r+ B6 Y+ O. `0 w
<body>
A, w6 F4 [4 G7 U# c
<div id="pic">
+ V7 `4 P* B# x. I$ P2 Y
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
u0 A$ o0 Q0 V# C9 i* H
</div>
0 e" W' _8 C# }1 E2 G+ e# M( o
</body>
- {% o6 E5 t2 c4 A7 K# q- S4 n! P$ D
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
