标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
. m& {# @& ^" r* w0 t4 w
关键在于：max-width:780px;以及下面那行。
7 y7 q- S2 \* I J1 `9 h. ^
固定像素适应:
6 [' F& k- [$ p
9 ^+ ]4 E; h! Y4 }0 a; l1 Y
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 h. Z" O# D% [) _, a9 T* X4 q9 ^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* r( p1 n4 f/ \
<html xmlns="http://www.w3.org/1999/xhtml";>
: p% d! x `$ J
<head>
3 ?- G$ \- D1 S" ?3 S4 X
<meta http-equiv="Content-Type" c />
7 G! H, I: i6 C% n
<title>css2.0 VS ie</title>
7 P' j9 m# }9 ~& E6 `+ w' |; m
<style type="text/css">
4 w& ]+ e) o% w5 T
<!--
" ]3 P4 }' w; O) e8 e. v. k! R
body {
+ V; C! z' ~) D# p
font-size: 12px;
1 }5 X3 h" ?' K O5 O
text-align: center;
7 y i' l- p1 h# d# s
margin: 0px;
6 o! l$ t0 C1 _, P5 U
padding: 0px;
/ ?3 M& E' }5 G! V! @) U/ y
}
5 @- P3 H' T9 y( S2 y, }
#pic{
2 r C' l/ [5 G* ]
margin:0 auto;
; z/ n, k0 f9 x6 A
width:800px;
. |" ?5 k }& D
padding:0;
9 T1 B' {7 u1 K9 T0 ]% X
border:1px solid #333;
6 i! F) w+ i3 \3 i$ ~5 U0 r
}
3 V# k, H3 P: u. E! X8 \
#pic img{
! p n% d: l. f6 m* ^
max-width:780px;
2 a1 ~3 K& A$ _, p6 F3 j! W
width:expression(document.body.clientWidth > 780? "780px": "auto" );
% ]1 ]6 e+ @/ R% ^: @
border:1px dashed #000;
; ~4 S3 F# l7 c. n
}
) m& H4 F$ D7 a L
-->
' V p! z3 y- U2 f6 _4 H+ t2 v/ j, I
</style>
6 v1 n3 o. U' l9 P$ ]" l
</head>
/ ?- [: U8 T4 S
<body>
. M8 N! e% t& k0 `4 t0 l
<div id="pic">
2 y2 p! E& g ]- o
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
! Z8 ?0 Q! j' C) x( \6 O
</div>
8 U, P$ c! e, U8 x
</body>
# r0 V7 A+ J7 \
</html>
, ^7 V0 |1 W4 r2 { N& j" \/ R
! G a' {5 c/ O6 Q
百分比适应:
, D' g# Z7 q! t8 r) I1 K
以下是引用片段：
( R% J5 l! Q- g: j0 b( `1 z' d) a6 Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: c, @# s X/ p* ?' z9 g, s4 ]
<html xmlns="http://www.w3.org/1999/xhtml";>
: C! W* u9 `( g& `4 p- @' \
<head>
! }, b, V( R+ W/ Z' g' `
<meta http-equiv="Content-Type" c />
, ]0 x- e& q8 l
<title>css2.0 VS ie</title>
- D* c. f/ R2 ]
<style type="text/css">
' W7 E/ `0 I7 a' l6 C- S
<!--
$ I5 v1 A6 T% v. d
body {
+ N5 F4 H6 ^4 X/ [( u M
font-size: 12px;
[$ V! H0 U; s9 Q1 U
text-align: center;
; j/ g o3 U) A4 _4 h5 U6 d4 _$ k
margin: 0px;
2 i8 i" h2 c7 `9 w6 p" [) A
padding: 0px;
; G) A( K2 B y& C1 @+ \0 M( Y# y
}
" J* H# B0 |. N% L
#pic{
8 T; L% h( S" O* G
margin:0 auto;
% U! p7 R' P0 W. t; `& G
width:800px;
6 \3 @* O1 }) U: i9 w+ ?* _
padding:0;
& j/ N9 I% n) r- c
border:1px solid #333;
; u& R( G5 L/ H
}
- D! }1 H& `( W4 \
#pic img{
9 R8 ~. d- z0 u! Y1 a
max-width:780px;
9 v/ u$ n; D# Q N7 g
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
( c# ?& Z8 _( [! \( g
border:1px dashed #000;
" w( j) M1 y! V1 _2 ~
}
$ u u! I: @1 M5 A
-->
" ~" @9 J6 J) |4 }9 J
</style>
6 L, B( q$ t/ @* Z- ^& f) q
</head>
d% E$ U1 w: u
<body>
: |4 J5 D# I( A0 f, r5 F M& X
<div id="pic">
, U9 [# n" ^: } ^9 ?0 a
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
8 a" t( L; F# Z" E, W, u+ `
</div>
7 p- U. @- V9 F6 n0 R( V
</body>
" F1 e* }; T9 }% x& X4 k$ e
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
