标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
0 C# ~1 Y: Q2 y
关键在于：max-width:780px;以及下面那行。
% D+ r, r! n3 u y3 N2 w
固定像素适应:
3 e0 X1 E/ ^. D0 M, [2 \
/ u, Z$ [) B2 |6 h) h
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> 以下是引用片段：
6 G8 I4 |$ c$ ?+ Y# ~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ g7 g l9 _. b, w$ H" W' Q9 l
<html xmlns="http://www.w3.org/1999/xhtml";>
% A3 |$ b5 x; T; O' d
<head>
1 z6 I8 q6 Y& {
<meta http-equiv="Content-Type" c />
3 P: e, G: u9 h
<title>css2.0 VS ie</title>
7 u* T- g% [4 C1 e/ {, T
<style type="text/css">
6 O9 ^. A" F# h- _+ f7 k t
<!--
6 o% F. @5 }, r0 c8 z* @3 n3 G
body {
4 r/ b. d( Z z2 ^1 Y. Z, G
font-size: 12px;
0 O& Z& p7 u }! N: q/ {* Y
text-align: center;
, @+ p* ?9 S. K& d- V) E+ N( B* v
margin: 0px;
$ O! z3 `5 L- M- P# {7 d
padding: 0px;
( R# c, F; _( b: Q% \
}
! p% |0 i! n. W: d6 s" O1 q$ b
#pic{
& k4 m/ V# T z% g
margin:0 auto;
4 k l0 N' u) P
width:800px;
) d* k* z" v; q1 W E7 |% n
padding:0;
$ ^$ e; J4 B/ o5 F" |% W
border:1px solid #333;
( d8 B# K$ `! ^9 P% T# J/ T8 g9 T
}
' ?# O) T7 X r, U* m
#pic img{
4 j! F0 k7 ^9 P4 i5 x: e
max-width:780px;
5 k- u+ }0 J: ]; n4 G- L
width:expression(document.body.clientWidth > 780? "780px": "auto" );
. _# l; r+ x6 I/ Y+ d9 d3 X
border:1px dashed #000;
8 E$ ]* y1 A3 ^7 `
}
/ R' i" |2 Z5 |: z* U
-->
8 b' \; e8 d j( X; U# ?2 b
</style>
, u5 o: I( W2 N$ [, O. K" L
</head>
& x/ R+ i0 w4 k- ~9 n) A& h R% Z9 ~
<body>
* Q- a1 z! f) U* q! t8 p
<div id="pic">
" B- M, N' D1 r& K) Z* Y! [3 A* H
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
& f0 e. [+ l& ]4 L/ {9 X+ Q
</div>
' L. N" ]2 J5 k4 J% O* Q/ S9 T
</body>
5 J# t+ M. |6 e/ J- Y
</html>
' m7 `) V- P- h n
2 a, b& [8 [+ G) Y
百分比适应:
) A" l0 n; `1 K1 L% K& Y4 T3 g
以下是引用片段：
0 O2 h0 y8 P1 P# K) V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
) n( N* w0 x0 d& H
<html xmlns="http://www.w3.org/1999/xhtml";>
4 K3 J# z( u+ N0 Y
<head>
% u. D+ ^; C$ w# T s1 W
<meta http-equiv="Content-Type" c />
9 F; w$ _( C P% K' P6 Y
<title>css2.0 VS ie</title>
" P' S' n% D- S$ k; h5 h
<style type="text/css">
/ _" X/ k; C3 a0 h2 M/ {9 ?. f6 Y
<!--
0 z' v( a) j& A; `+ L
body {
5 c. M0 U. g; p0 P
font-size: 12px;
' z# b3 s: D0 z6 B( m
text-align: center;
% ?$ |0 u- _/ W0 F
margin: 0px;
, k2 o. F4 i7 ]. L& t, _ H
padding: 0px;
8 d& r* N2 U# L, K6 w' p
}
# K7 c2 N( V2 J7 Y1 b
#pic{
' w; e' s3 ]/ Z, Q, D+ v
margin:0 auto;
" s( Q; {3 ^0 [, v; y s' g9 q0 D; o
width:800px;
, `/ H4 A* N( q ~ s
padding:0;
, o' ?5 j* E3 R- R: ^8 U# j
border:1px solid #333;
# s/ C% ]6 H7 Q+ Y9 e$ `4 V; V; ]
}
: T/ C$ @ Q s9 E/ \( b
#pic img{
( C6 ]# B9 w8 C8 p9 j
max-width:780px;
3 U1 ~9 \0 l+ n9 ?* b v9 R
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
6 ]1 B6 J2 q9 m' u, D
border:1px dashed #000;
" x, J0 U. w7 f! {
}
5 c( h7 m8 t' W
-->
! P# @7 Z7 R& F+ h" d ^. |
</style>
$ p0 z: P* ~: H' M* P
</head>
% K, o# z$ J+ T7 p
<body>
) N* m" y/ x* Z6 R! p& o" E+ i
<div id="pic">
0 e0 s/ G5 v! b" X. X' Y
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
7 v1 i% w1 P' r) J1 j1 Z
</div>
) m4 q1 V8 f8 g) Y# z
</body>
2 e* {- Y1 d2 h* A/ {
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
