标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
5 j; Q& r+ @1 j/ Z3 }
关键在于：max-width:780px;以及下面那行。
% k5 P: K. U8 O+ \1 N
固定像素适应:
6 Q; A- l& K4 | @3 P1 p
. L" s5 f7 T" {2 T1 y" Q( k
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> 以下是引用片段：
* S% d1 i9 H( b' r* u% [
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! `* R9 Q" ^# @) C- C
<html xmlns="http://www.w3.org/1999/xhtml";>
& c5 [0 u& P# y9 u
<head>
; n; D% u4 M# h0 q9 j; R4 S* A: h4 n
<meta http-equiv="Content-Type" c />
# |) Q t! A/ Y, L/ N
<title>css2.0 VS ie</title>
5 P9 n# ^! {! H0 l1 ^
<style type="text/css">
! D5 A/ U m4 u5 \' ^" d5 z
<!--
: I% H& A, N- S' q7 y7 j) E2 P' [
body {
7 e+ C% R. K2 k, H. x
font-size: 12px;
+ k" R D% g- w
text-align: center;
; T( ?" h0 F; b3 K
margin: 0px;
a$ a( u1 H% D, K! h- [; m3 E% h
padding: 0px;
; h" _, a* q% T4 e+ n$ l( r: |+ }
}
$ A/ [& ^! b$ D- H3 n( h/ U' m4 p
#pic{
- L* M! \/ X( u" Z1 _& A! T
margin:0 auto;
8 h) o6 y: k% v8 N7 e
width:800px;
, o- z: H0 U. I! g9 Z
padding:0;
; T1 ~5 m) G8 T q! a
border:1px solid #333;
6 d; \. ^; N$ R( V% z# A# }, k7 f7 ]
}
& C4 V5 l* _% ^2 j& R
#pic img{
: ?* x9 ]; c9 n. z9 K
max-width:780px;
8 h- q: N/ K# p8 y9 m( I3 f# Y6 w
width:expression(document.body.clientWidth > 780? "780px": "auto" );
7 @$ f" B/ f( H
border:1px dashed #000;
9 l6 f( I1 z$ s6 P$ S; b6 r
}
# ~3 B4 d$ d$ _& J+ j$ A( }0 K
-->
; j9 q, ^8 c9 \! A! Y* Y! a/ P; A
</style>
2 a9 \. ^& Q& }9 V W, ^; K
</head>
* h5 G* k& m8 H, j& Q9 w
<body>
# n4 Q. o3 U" B! ]. p
<div id="pic">
; h3 P. L ?6 }+ V2 E
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
* a3 G* h# i& Z
</div>
; U1 T4 L% x& {9 m
</body>
4 s7 q1 H7 \- T
</html>
+ p' J7 q/ x1 h) a" C! O- ^4 V
r7 k5 }1 p# G2 |( K/ [1 A: m3 P
百分比适应:
/ Q# v8 {0 ~# U, q1 \
以下是引用片段：
+ J# F7 X1 j* f; V( ~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ | m9 D+ Z. K: ^
<html xmlns="http://www.w3.org/1999/xhtml";>
N1 t1 I$ K* n" Y2 E G3 c
<head>
) n. y# y4 R& v( E& u
<meta http-equiv="Content-Type" c />
5 R6 ^; \4 H7 f: @
<title>css2.0 VS ie</title>
8 O, O8 Z' g3 F8 f* h
<style type="text/css">
. R* R8 I) G# z! I! C7 C7 O
<!--
- q1 S3 n$ x( ?
body {
& ~/ D S3 y2 U! u
font-size: 12px;
5 A. e! ]) D" \. w5 V/ t
text-align: center;
& Y7 j" F4 G- B) r3 A$ }) l
margin: 0px;
3 r. E. B0 o$ b5 P/ ?
padding: 0px;
, w" U- w' Y( f3 z; f; k9 M. H2 Y
}
' d; W7 v/ V) v% [/ c. }
#pic{
& m9 W- y, Z; [) m! O
margin:0 auto;
^: B; k J5 x0 X E# w
width:800px;
2 R' t8 `4 a9 N+ h2 k/ Y
padding:0;
, U% Z' j' X, `; F) }
border:1px solid #333;
) O2 o, l- o+ V" B
}
[/ _ Q1 i, R, P6 \: `
#pic img{
. c8 V, F' c5 E4 g9 p
max-width:780px;
7 u! A8 ~, @6 r" {
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. t6 v5 p3 ?; J& E3 f) E I
border:1px dashed #000;
m3 X% o- q* n4 ]8 R( P0 }( L+ u5 a ~
}
4 f0 H4 D; A$ d+ R9 M& A5 {
-->
$ g" c5 A# ^+ }' r% T4 q1 _5 t
</style>
, _ m6 S# Y: _
</head>
3 ?% W5 d4 H+ O! w3 w$ F7 C
<body>
) q2 M- R3 \# ~) n9 A Z, t
<div id="pic">
* o- \% {3 u5 F+ _' w% u
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
9 o" g2 D$ F8 s3 n( d, X
</div>
; p# J3 u- F, r
</body>
3 i3 b, ?5 I" N! m0 ~
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
