标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
( _* M( A; W, Z: M
关键在于：max-width:780px;以及下面那行。
" P2 z2 {5 F8 x& ~ D" V
固定像素适应:
( S) `2 P7 R. U7 }) V# L% O
. f( P- H! [) b
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> 以下是引用片段：
1 `; c) N* q$ _- K; h" m
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; |( d* O' ?7 A& }! O& W$ @6 N
<html xmlns="http://www.w3.org/1999/xhtml";>
3 X$ M2 m3 \5 }( Y1 W6 l% |
<head>
7 A: f. c- a, h% k0 U' q
<meta http-equiv="Content-Type" c />
( @1 [" m' u- S( r R
<title>css2.0 VS ie</title>
0 n& Y1 b3 Y$ A! h* p; }( r3 K
<style type="text/css">
a9 e# F; e% O: N' r# I
<!--
) @" v1 Y" J* F" A* n$ z
body {
7 I) |. [" j+ F
font-size: 12px;
2 U: r8 j& c0 H+ T$ [( D0 g
text-align: center;
( I. m0 k$ r$ y7 W) L b* \
margin: 0px;
8 B7 E; k8 x& @8 K
padding: 0px;
! N5 U: l/ N6 J* a
}
5 Z' K0 e% P5 ], [- _
#pic{
2 y; }& S1 l1 n; `
margin:0 auto;
F/ e6 v. z! x5 F7 {$ O- A' z$ M
width:800px;
" C% c3 O4 D& k _% Z
padding:0;
2 u; }) H5 x4 @1 P; {+ g d0 f$ A
border:1px solid #333;
) Q! D; l& N& X! m9 H, m
}
2 y% p$ L' _$ A, u% r; b( q
#pic img{
. r' k8 b' m) Z! `" q
max-width:780px;
9 O+ p# ?1 I8 S9 [
width:expression(document.body.clientWidth > 780? "780px": "auto" );
( X# x& p7 _! u$ E- [" R/ G7 Y
border:1px dashed #000;
1 T8 T# Q0 {9 ]9 j& a% p; C. I: s9 E
}
" _" z' {- @" K. d+ U0 z# S
-->
8 S; r3 Z9 N7 H5 g. G* S8 l
</style>
3 |0 |- W8 K# J6 U' X7 b8 p$ v
</head>
$ M- I! o9 u( o i
<body>
- `/ h4 S0 n* ^* } N; X; U" @
<div id="pic">
; n) n4 S% c8 x, u. z, Q; L7 y" m
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 N" n9 c3 X2 |# ~ R
</div>
# g8 v. x" s. ^; C$ c. d% Q2 [
</body>
. ^" G7 ]" O9 n
</html>
; a* l! Q( r7 z3 M8 ]& p$ x
" V* e( F+ }$ `/ @& S
百分比适应:
6 P8 c7 E6 j9 F& E
以下是引用片段：
' @& j& n7 j# d% Y1 ]+ Z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: r/ G9 h' ^' }; B
<html xmlns="http://www.w3.org/1999/xhtml";>
: D% m9 \0 M3 i, m6 |3 p; B
<head>
. z l3 G) d. H3 L
<meta http-equiv="Content-Type" c />
5 g; W1 y) J \: V# C4 D
<title>css2.0 VS ie</title>
' \2 F8 u2 S* _7 g% ?
<style type="text/css">
# Y8 b2 M( O5 W: \! w
<!--
" S4 D2 j& i4 {
body {
* h( Q6 n% j" N; B. ?
font-size: 12px;
9 O& Z5 L. C) H: p
text-align: center;
3 c, C8 x6 \5 U# t$ M
margin: 0px;
- d# `. h/ W3 f0 W6 J1 p
padding: 0px;
# R2 H& L0 Q+ ?7 h1 a
}
1 u; B& C9 G: g; q. N$ H
#pic{
+ ~7 o* _/ Z6 j$ g2 A0 o) c8 ]
margin:0 auto;
. O$ ]. ~/ j& E) o/ c/ c b* |
width:800px;
! p( o, Q" ]! U# c$ g! ^7 c
padding:0;
/ c t' a# @ Y* f) I0 n
border:1px solid #333;
+ I% |7 y, O$ @3 a a( j; x. K
}
& b( ?! F& }( F2 I) w' j
#pic img{
$ L* q; x' i. e! v0 d# L b% d5 _
max-width:780px;
3 Q. Q# H# _2 F, I3 ]
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
2 U5 U& l- K; T) X8 t
border:1px dashed #000;
3 {* s! P3 M/ D* c, O6 e8 N P
}
' l' C# J* Y% S5 u6 K5 K
-->
' ]: E5 ~5 D- c- k
</style>
* a8 z ?! U$ a Q6 y+ A: M
</head>
9 W8 a- c, U+ S M* J2 T
<body>
2 f5 h2 o; \6 v5 M
<div id="pic">
$ D8 F, L0 S' X1 f Q9 ?& `
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
6 {1 @ E. u! e* L, }; y
</div>
2 l$ P0 y% s1 b ^
</body>
+ h4 _( J9 `- k0 u. o# V9 l; O
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
