标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: ^! O( V- g# b
关键在于：max-width:780px;以及下面那行。
& T, k: n/ X$ D" ^- W Y+ h
固定像素适应:
5 J. y y0 K( X" ^$ p1 {- N/ \
! T1 N; T- u- q. S4 Q
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> 以下是引用片段：
3 o) w3 I3 d' e; f! t) v2 U
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# l: F5 L; e" I/ c8 ^$ B
<html xmlns="http://www.w3.org/1999/xhtml";>
0 H2 k* ?# H0 w" @) w1 j
<head>
) j! @* J$ q/ A- w2 ~" f& j
<meta http-equiv="Content-Type" c />
7 M; d7 C+ e/ @" y
<title>css2.0 VS ie</title>
& Q6 _2 X+ s. p4 `1 _
<style type="text/css">
$ W4 f2 V2 r: i* |7 T' A: ?+ |" E
<!--
/ Y3 g0 [4 {- T: v
body {
" B0 f! Z! k# N+ Z
font-size: 12px;
% d: ~2 `, z4 F6 k
text-align: center;
) V T ^: S6 M) q- Y! [/ i
margin: 0px;
6 ^& z" w! e% q9 ?6 t- W- k
padding: 0px;
: W+ o. O2 U, M
}
/ V, C4 N4 F* u0 I7 Y) m" f
#pic{
* Z$ i( D0 z6 @) |9 @) c" H9 c% ~
margin:0 auto;
2 T. V; @+ [+ R: {: m# I
width:800px;
9 c5 @# F7 h: K; F. V
padding:0;
+ w+ u6 x+ O) \* z
border:1px solid #333;
X! x5 B3 Z) z& S& k
}
7 x4 g' Y4 Q) [9 p7 d# I
#pic img{
U9 Z" n+ y2 Z! `
max-width:780px;
! ? i+ t+ B8 H) S: h
width:expression(document.body.clientWidth > 780? "780px": "auto" );
U% i( K5 s# p6 r0 y) C: \7 v
border:1px dashed #000;
+ A: B( k. s( ?! I/ \4 m# v) M: ]. h
}
- l/ R9 i& E+ d
-->
1 F/ u0 y7 }* J: S
</style>
* b1 M* P4 r) X- S/ l' g+ \! o
</head>
5 B0 s& Q2 o. J9 C
<body>
7 E6 x) X5 T- o" L) T) z$ O0 ]0 K( e: h
<div id="pic">
" k3 V4 n I& p5 c4 U% X
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
' S U' v% t( Q, x4 X Y
</div>
% q* M; {- A) T7 Y; v& |
</body>
; q7 v/ U4 L& z* G6 u$ `& |
</html>
- b: I1 R: A# e! a6 C
: M. m9 o! I2 ]" Z+ @
百分比适应:
4 S' j' W/ m, q* k
以下是引用片段：
) s' K3 ?7 N) \5 E0 Y5 Z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
7 Z5 T$ M1 k: h; X7 |" P6 W( G
<html xmlns="http://www.w3.org/1999/xhtml";>
6 {. H2 {+ L n
<head>
/ O3 l' I8 ?+ p1 q: ]' W$ |* T
<meta http-equiv="Content-Type" c />
Q0 _! o8 [6 j
<title>css2.0 VS ie</title>
/ X; j& p- j3 \
<style type="text/css">
% H( J- j) d; P" x6 d, k1 N
<!--
0 r' H& B9 b( O$ Z) ^, J" F: o
body {
1 X& t0 z2 H5 r1 _' y1 U
font-size: 12px;
1 w J0 l& F* Z# i8 r3 x8 t0 n
text-align: center;
6 R& |8 i# e/ m! P) _- R6 y
margin: 0px;
8 T' x x) L: I, ~" Y
padding: 0px;
9 `. I( y4 z+ T. {$ F! e" G
}
w1 _# }/ C5 k; k
#pic{
# E/ s: L; a' a- K7 a! D/ n- T# S
margin:0 auto;
" S | e3 n6 P( E; c
width:800px;
' j. z3 X4 c. V3 {* U
padding:0;
, v, y" n* l. Z# e6 S: n( C4 I# }3 [
border:1px solid #333;
8 F `* z1 A% V9 V+ r$ J
}
) z# r% @4 A4 `2 ^( I
#pic img{
8 N+ D, u7 A) O5 H; C7 E
max-width:780px;
8 L3 z3 d$ c% C. Z6 D& _
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
5 k" ]; ~ H/ ~- x- e
border:1px dashed #000;
8 {" f2 B& f4 j9 s$ D0 z
}
% ^ t; a* |+ ]+ `! P2 A" G6 a9 V
-->
; g5 @0 Z& L9 z) K" V0 {- Q5 U& D
</style>
2 V* W# M8 c. O0 L! r/ m$ |- V9 @
</head>
* | o$ L0 y/ N5 F% f- D" {
<body>
( P0 u+ m3 f0 M
<div id="pic">
/ k: O" a% A3 k5 N, w6 D
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
7 W7 n6 H1 O2 ~) n3 g4 u
</div>
7 N9 a; H* ~( c
</body>
6 Z/ h- t/ f5 S* |( W5 b. f0 o
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
