标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
6 P: H, C& {% S! t& R4 p
关键在于：max-width:780px;以及下面那行。
- x8 g- S& a9 v: j; L3 B; w# V
固定像素适应:
* |6 ?% C+ t" l: _) o' f4 z
/ ^& o, p6 d9 v$ O! e
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> 以下是引用片段：
4 D% T8 ]' m0 F4 R& x5 U
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' B: M7 }- j9 t: S- [# L" X* d: S
<html xmlns="http://www.w3.org/1999/xhtml";>
5 p2 t8 K' j: V& y7 ]
<head>
4 x: N4 \& @* W* z' S3 P6 Z8 R
<meta http-equiv="Content-Type" c />
7 w* e+ t8 O6 p/ k: M% z5 K
<title>css2.0 VS ie</title>
. Y; Y0 Y* c6 G# r
<style type="text/css">
! L6 Y1 Z0 Y7 _9 |" x- ]
<!--
, t$ J+ [/ o; _1 W& i
body {
- x/ L2 p4 X( A" w' x7 _
font-size: 12px;
5 r1 `2 V" Q9 ?1 W9 r
text-align: center;
- t) h: U& s& ?, _
margin: 0px;
6 d9 `9 n& u- ~/ k) p
padding: 0px;
" R$ T9 ^ q7 E! C) t4 Q
}
- h$ i& `% Z; V! ^3 b
#pic{
$ U6 k6 u5 I2 M
margin:0 auto;
1 d# N. x5 E( |/ K; t L7 A
width:800px;
1 Z5 ~3 G& t5 ?4 L( f$ ?7 n2 j
padding:0;
3 T, G( V' k! I; E7 u1 Q; |
border:1px solid #333;
' R2 `9 p* k7 U0 w6 S# G \8 J& |; v
}
- n8 r Y( \; b% j/ Y. M3 N) |
#pic img{
6 t* p; y) D1 l! A- [
max-width:780px;
: j! `2 h p; c- `2 u
width:expression(document.body.clientWidth > 780? "780px": "auto" );
3 x8 x$ C7 n6 R; T+ _ y7 [3 \
border:1px dashed #000;
; w/ P5 V% o# M- D# R5 a; C, m% X9 L
}
V. d5 H4 U2 |
-->
$ j; l/ W( T1 V2 v1 C% ?1 h
</style>
$ M) M$ z9 Y' u: O. N, E5 q
</head>
6 G, Q8 t5 I6 a' S& x9 H. b! v
<body>
# z: L2 g7 B$ n% i
<div id="pic">
) ^; r2 x3 r2 M+ q4 c& H3 V
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
. D0 R" S9 i2 V( l! Q9 F
</div>
" e8 t% i& |) r3 [' v4 H7 t
</body>
) X8 O( \1 J$ X$ [( v5 g. _
</html>
5 ^+ z; S H) D
" W P: ?' c/ X1 G/ J3 E1 {
百分比适应:
l; Q% \8 r' T
以下是引用片段：
# D8 K) F, R8 N' ]# A3 |7 M0 u8 t
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 j4 C' k/ E, X" v3 e! N
<html xmlns="http://www.w3.org/1999/xhtml";>
+ `" z* @: Y% b' N: K$ ~8 i- ? ]2 G
<head>
. J9 {* }, @6 E9 X% d
<meta http-equiv="Content-Type" c />
/ `: z! S9 P, K% d
<title>css2.0 VS ie</title>
* ]" _" m9 t1 q1 u9 j4 u
<style type="text/css">
; T2 ]3 Q/ O1 ?0 Q
<!--
- \8 [! ~: k% L* \0 D `9 [: K
body {
5 E2 N4 Z0 g9 V2 t' @( S
font-size: 12px;
1 \2 n3 a, U; g1 U1 _' p& w
text-align: center;
: u" Z1 c. U0 p" _: e8 v) u5 [
margin: 0px;
- l1 b1 c* p7 P& y6 m$ y g5 ]
padding: 0px;
& i/ P6 l* x# u
}
5 j7 A, n" h6 }# P. E g4 F
#pic{
% @$ V* j" I+ X: D# E3 w- R
margin:0 auto;
" \1 A! n8 \! F" N
width:800px;
) z0 `+ x9 K7 c2 ~9 I
padding:0;
+ p* V% Y) i' O0 ]
border:1px solid #333;
3 H- K5 G8 p( z; V3 x! k, G2 N6 a
}
) V) a4 W$ x) y# J2 q" y: L; p' I9 q) J# N
#pic img{
* a' u n9 _3 l- ^0 P
max-width:780px;
- {+ R, D& z: |, J+ l! h- h8 e
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
: {& ?5 _9 q# C
border:1px dashed #000;
1 d% }% H; a; \
}
& B+ {/ ]; @+ g; R
-->
1 U. v( h5 N9 K- E9 a. A& U; R% ^
</style>
7 _" m2 @6 n7 Y( X3 q9 Y, a# x
</head>
}$ w& u9 G7 P; L7 N; v
<body>
; N; B) Z' e7 }3 C! H
<div id="pic">
% G' W, }1 n' f7 O- ], C7 e
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
0 }9 x0 b" r/ b
</div>
, t4 K3 U: [5 H; l o# x. F7 h
</body>
* C% U; I3 I& J" E& \4 J
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
