标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
% O; Q- p f( h* b0 c" n4 P
关键在于：max-width:780px;以及下面那行。
" ?! d C. {' M9 M2 P# t- c1 I: E. W! s7 G
固定像素适应:
$ m/ K4 n+ Y) \* E" t0 Q, Q- l, ]$ U, w
' R& s& V- k) g9 Y/ d
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> 以下是引用片段：
- f2 N& y1 ~0 B2 x: p7 e: g1 V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, M9 G) X6 S: e) z6 E
<html xmlns="http://www.w3.org/1999/xhtml";>
* ^1 x6 l( H" H9 K4 J+ Y
<head>
/ [# O; G- p4 S
<meta http-equiv="Content-Type" c />
; o0 \+ e* S4 B$ J' V5 E
<title>css2.0 VS ie</title>
* M, k/ `( Z! g4 T0 {( \9 e1 w
<style type="text/css">
/ d, W' V/ b8 r; c- V
<!--
# c0 e9 O" s. h. [$ P
body {
- _3 r, k _! A" j
font-size: 12px;
3 U$ }" R) j) p
text-align: center;
0 {& s; l- r7 B% N h* @
margin: 0px;
* A/ b# W+ M9 t) f( S/ ?5 \
padding: 0px;
. \' W# n7 |) ]2 S4 D: u
}
- e& u. s& z3 Z! X
#pic{
; R! I- x. o9 n2 A
margin:0 auto;
* t+ t+ ^$ L& M( F) ^' R, P
width:800px;
; A6 P( T0 ?6 M4 H
padding:0;
$ Z4 `; y( Y2 B9 s
border:1px solid #333;
4 u9 f9 }$ q5 P( [
}
) V: Q) B( `+ p9 z3 p$ F
#pic img{
8 ]+ E' X, S9 d" j
max-width:780px;
% ^- ^9 m+ K* `
width:expression(document.body.clientWidth > 780? "780px": "auto" );
- l. {% M, w, Q( R1 X7 Z1 w
border:1px dashed #000;
: t7 t4 m; W- e) z% w
}
/ ?2 j' u/ S1 j" d: a6 H, V' c3 x
-->
3 Z' ^5 \- e( Y4 t8 Z$ U
</style>
5 D/ x% S$ w) w. { E. \+ D/ G
</head>
' Q4 y5 t: e* J) f( b; `
<body>
; D% O' _( I0 C0 Z& b! F$ f
<div id="pic">
! n5 N3 F1 o( J
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
4 ?, H/ l# i: \) L7 G- q5 q
</div>
5 j( R) T9 Q2 E( v7 \# @
</body>
* n) T! G3 _8 i- B9 E# f U" [; l
</html>
+ s) }! [3 O8 ^. R7 V! K: g( Z
/ y& Y5 c6 {$ |/ t2 j( }0 R
百分比适应:
1 q- k4 s+ B" O4 Q
以下是引用片段：
+ I. x9 f& S1 e# r9 ^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, L3 H, ?8 _8 q
<html xmlns="http://www.w3.org/1999/xhtml";>
7 f3 F, Y% Y& a5 _
<head>
$ u s: Z; j4 i6 n1 M* q/ g9 H
<meta http-equiv="Content-Type" c />
7 W% A4 h6 e5 a, S' ]1 `, w# P
<title>css2.0 VS ie</title>
! I: K) l( p. K$ b$ ?1 X8 K
<style type="text/css">
7 [3 y) p) \% _+ L6 g
<!--
: e; \3 X. c1 z3 h' _
body {
0 s- c" t/ f: l! ^, P: L, E
font-size: 12px;
6 w: ~6 w* i( x! G: n5 l# {2 R
text-align: center;
- s5 q T5 T1 Y, n0 ?" k
margin: 0px;
- y( J4 S6 z6 L5 P! [% v# r
padding: 0px;
8 R$ V) S* h' \4 \. R: ^" M. B
}
! [( A& U3 F1 f) T4 A- I8 |0 g
#pic{
4 Z& c! M( Q* n! P' O* z0 W3 i& S
margin:0 auto;
' ^4 o0 `/ U% ]' Q# _
width:800px;
$ }: Q) l+ A" p9 ?3 L$ b E; p, l* |
padding:0;
& f B" S+ U/ D" {
border:1px solid #333;
# P" h! D' a; L- e7 K. p' G
}
) B- Y) d9 I8 ?3 w4 V b
#pic img{
. ]" e2 }5 A- X1 g2 ^
max-width:780px;
% h- x: m$ @( E# y0 M
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
4 L& g/ O# z# W
border:1px dashed #000;
4 Y7 d. h* P2 _) ~$ ^8 v1 z
}
- |" ?6 ^: j" q5 d6 \; A
-->
* \/ \7 P- Y% Z @- p0 R6 @
</style>
# r0 k$ F2 k. y" o$ m+ b l. M
</head>
- o# g& ?( p" Z& e$ _
<body>
* k/ M, h7 P3 L( D: Z) z& z
<div id="pic">
3 w6 ]) y# f( Q k4 P Y: O1 \2 A
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
" [6 D; X1 f$ o& U0 n _% n
</div>
0 e" w! K+ D: y) U
</body>
7 s! J* p$ t8 U# [- w* B% j& p8 b' ?
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
