标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
- f) O' z0 O, X* R% [. s2 A
关键在于：max-width:780px;以及下面那行。
, `. v$ Z2 V3 ?% R9 N
固定像素适应:
+ ^3 t4 a; V2 p9 {! K/ ^
4 v/ B1 B6 t4 U0 T w
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 Q" p* x- x9 L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; }! j4 B4 {8 G
<html xmlns="http://www.w3.org/1999/xhtml";>
0 D4 n" ^ a6 c8 k5 }0 f- ~& u5 S+ r
<head>
4 x$ s$ \' ~3 C. Z; F1 {
<meta http-equiv="Content-Type" c />
( h( E2 R, M$ r
<title>css2.0 VS ie</title>
. W+ c! B$ I/ ^6 v, r' s( {
<style type="text/css">
1 l: v. } P) z7 h( J
<!--
! J& r2 `, v1 p) m- I
body {
. y# {; O/ Z3 {, S
font-size: 12px;
- Y3 I3 x& a; g, e& ]1 A
text-align: center;
$ Y [3 z' }+ b% g: p9 |* X
margin: 0px;
& r" {' ^' T! v, K
padding: 0px;
( i U* N0 L8 z0 _
}
, F1 a. w# j/ B* [
#pic{
' O7 r/ C/ T( E0 {+ p& y. K8 B
margin:0 auto;
+ v' ]- v6 g: p+ B
width:800px;
2 s) X" b1 O9 f) k
padding:0;
5 K9 k6 A7 d/ A7 a; Q% {2 t
border:1px solid #333;
0 l9 Z5 p7 k( H; c, |8 i7 o
}
1 O6 G8 e) g5 @: c y+ p
#pic img{
* b/ ^0 J/ ?' W$ l- ]6 P$ d# W
max-width:780px;
) P& a, F7 } S. e; N0 V& i5 n
width:expression(document.body.clientWidth > 780? "780px": "auto" );
( I; f7 O& I* S4 s; s, j8 g
border:1px dashed #000;
8 F2 L' C8 L) [2 m* [/ F
}
# s$ g/ X$ i# }: w2 Q+ r( c
-->
$ l) m( k/ G- r
</style>
' u4 e0 m/ V ]3 W
</head>
& \/ a! T5 ]4 { w' W* t' m" e
<body>
8 r; U6 T$ K5 r) v- t
<div id="pic">
- ~( \6 n- D& o5 v% O0 h! h: o
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
8 y# ^) K) {2 [7 r/ M9 u
</div>
4 V# N% [* _1 }4 z
</body>
8 X& o; F, f$ x6 k+ T
</html>
. d% F: A! ]9 B# m5 o0 \5 ^* u! c
4 g) v. H* Z/ F' W" I3 w/ u: `
百分比适应:
* d2 R3 X' n8 D! _( g, f
以下是引用片段：
; y6 e( \: U2 h2 D$ A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. o" D& \# y& g) F
<html xmlns="http://www.w3.org/1999/xhtml";>
9 q/ m, p9 |/ p) x. P7 m+ X# a
<head>
! D" w: ]: I# F" @8 R- t. I
<meta http-equiv="Content-Type" c />
6 e5 a/ n% V5 E, w' i/ E' A
<title>css2.0 VS ie</title>
- p+ y) y$ s# a" N
<style type="text/css">
& v0 v3 y/ \; U8 s5 c3 W1 H
<!--
% Y' d0 K/ E9 D, H
body {
( }% d' `" s8 \5 b, ~" V
font-size: 12px;
3 D" H0 q5 a* s O. |5 J
text-align: center;
2 l0 A" V6 k1 K0 c: j
margin: 0px;
) Z5 A' t, P: ^/ W; Y
padding: 0px;
$ u0 l! w2 f# U6 |1 ~( w) D2 Q
}
4 ]. ^" O! E- b$ g W
#pic{
) z4 S, K3 ]8 R& ~- H x8 G
margin:0 auto;
# J2 Q! k9 W7 L) v
width:800px;
" k. o0 ?4 a3 a4 F3 e. F! A- s
padding:0;
, a0 K, K9 u) z v; V
border:1px solid #333;
: e4 v, k3 A9 {: X
}
2 v8 E% u3 g8 s8 Q8 p+ F+ L
#pic img{
9 P, {4 Y) ?+ {4 @+ a- [
max-width:780px;
) r, D" `, `% ]8 K/ g
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
4 r3 p' V* H3 |. p
border:1px dashed #000;
. A5 l1 A& w7 [6 Q
}
4 A, g7 b( w6 I
-->
. G# ~% Z0 t' {
</style>
# P, f" Q0 ?4 e# i7 ~( S6 _ w
</head>
: W( _: \* s( q! P* Y B+ e
<body>
/ m' v" s% y- Z0 t* \; I& E7 y8 v
<div id="pic">
1 K' X& r% {; u# T( l% G( o
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
5 r+ E( N# m) s0 I1 h) w# \8 @
</div>
1 d, n7 |0 P; a
</body>
1 X4 _% |/ j& O7 a
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
