标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
* t( G, z& Y6 C
关键在于：max-width:780px;以及下面那行。
& Y9 ~9 H. X4 l, E2 \
固定像素适应:
" B* `! U3 `' z( X5 T* O
# V" r( \* E" r/ ?1 k5 C! [
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> 以下是引用片段：
$ P5 L( D# k$ c& N, v
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ [5 K, K8 e+ F1 i2 @$ C( h5 u
<html xmlns="http://www.w3.org/1999/xhtml";>
& J _0 u( c8 o0 V/ }2 S: `
<head>
- \! ~# J3 |" L+ l/ l/ a0 C. \
<meta http-equiv="Content-Type" c />
' z4 G! A$ h* _
<title>css2.0 VS ie</title>
' t6 F% p1 ^% a
<style type="text/css">
$ L4 h. \2 o a. j
<!--
+ T9 d4 W' u3 i U# ]* d
body {
% G- B8 A( D! w; o$ q& ?' M
font-size: 12px;
% _5 D5 E+ z( |7 o$ c
text-align: center;
) S! x) U/ X; c) d$ ]' S
margin: 0px;
' U' t% s* ^) Z8 B
padding: 0px;
& b- i! F& z0 ~: D
}
- S- `/ _" t0 ~' a7 g9 _/ e4 u
#pic{
0 |6 n6 d4 Z: W
margin:0 auto;
, R$ T9 {/ ]( w6 V# O. d ?$ J
width:800px;
% O3 e4 u o" c% ]6 ?( x
padding:0;
. ` L3 |" J: J# h. V' D
border:1px solid #333;
7 G1 H1 M% K. q2 O
}
9 y% J* a1 ]+ u- B
#pic img{
- u$ q, o; u2 [; K0 c; \
max-width:780px;
! w+ N# d5 O( D. k
width:expression(document.body.clientWidth > 780? "780px": "auto" );
) P0 C2 @- t8 }
border:1px dashed #000;
3 v3 Z, V3 N3 Y" H+ P9 ^: o6 r+ X
}
N7 i, ]+ a! t l) E0 C) @
-->
C1 i! j, ]& e u) h7 }
</style>
8 P% a3 @& l3 J
</head>
. E+ m0 Q4 _- r: I! ^
<body>
- D7 G a0 x, M8 k8 r
<div id="pic">
) v @3 n8 ], ^& U/ m& e
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
' B5 N F; N1 c' k1 F0 X# W$ n
</div>
7 X8 b6 E& g# o5 A' q- |+ h {
</body>
& L6 `& I* m K/ j
</html>
& w2 s. G& R7 B7 n
( E& }( w5 H& [( ^% r/ V
百分比适应:
$ A' l* M# `7 e" w6 w
以下是引用片段：
# B" i. S& p5 v% ~) x/ b
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
7 {" [; {3 U4 T: t q% J
<html xmlns="http://www.w3.org/1999/xhtml";>
3 l* y5 x( `: P, b s+ v
<head>
5 h. g1 a1 H/ o7 f
<meta http-equiv="Content-Type" c />
9 p6 B& T* Q$ K6 q9 H4 s
<title>css2.0 VS ie</title>
4 |. Z( f' f! ^* q @' G
<style type="text/css">
4 \7 K/ _# Z$ Z2 `9 c( q+ y
<!--
$ n" ]5 p6 s- }* T
body {
" N" h. q. v+ v( b* o" y1 p( q
font-size: 12px;
7 y) I/ x; F& K6 |7 q" e
text-align: center;
: ?: ?4 Z0 ?9 L* K, h
margin: 0px;
- P2 U+ ?4 g: N2 L+ r- p+ F, N
padding: 0px;
+ @! _; i1 L$ C6 j
}
/ l) B( s% S @
#pic{
3 ^5 Y, W- M: ?
margin:0 auto;
) Y1 Y* h( H, {
width:800px;
8 ]4 w4 V: z" i/ `, D9 y& J
padding:0;
- Q. _% e9 ~; e, ? Q$ R* p
border:1px solid #333;
) e1 ~- L5 V7 ^% ~ O P
}
5 s3 ?- u4 D$ l
#pic img{
+ |% Y9 U( x5 p) m! ?) D
max-width:780px;
# `1 W& W% M+ c
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, g, i2 v/ e! v( B
border:1px dashed #000;
; W1 _1 F. f6 C$ |- C& R& X4 Z
}
+ D2 e& X* I5 ]1 M! A
-->
8 w; C. ~9 a( i+ H' G
</style>
5 F9 y+ ^5 X |( W
</head>
$ a8 |' [0 J+ a5 l% h
<body>
7 U: a4 {9 |" @! Y
<div id="pic">
1 K) t3 `6 M. a' [. r& o
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
6 B5 j: e1 y) j8 Y9 x* A) f
</div>
0 T2 `- Q4 P5 _9 j
</body>
! b+ q) P, j1 H7 ?+ n
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
