标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
3 n4 y- J6 }2 Q
关键在于：max-width:780px;以及下面那行。
/ c& J& l" {4 h) ], G
固定像素适应:
' C+ N; S( \" j1 b2 E( d' o
) W7 J2 x! `6 Z1 O5 u- c2 ?- X
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> 以下是引用片段：
) l8 y; z& C8 A$ u
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- N2 R3 [$ y( B7 j0 l
<html xmlns="http://www.w3.org/1999/xhtml";>
9 X4 E+ D, d8 h# h- @4 o
<head>
" h$ U+ ?4 v" Y+ J5 Z" A; e
<meta http-equiv="Content-Type" c />
. x" I4 a! |& D. L' [5 {( [
<title>css2.0 VS ie</title>
/ a$ ?' Y4 u. f3 V$ s# L# D
<style type="text/css">
5 ]; r; `; ~ r! U I
<!--
5 y. \& O- G. O" M' X; s
body {
7 L% r v. w' I3 B
font-size: 12px;
3 }' W0 R7 T5 R9 D0 I, G
text-align: center;
8 k5 h4 e5 U* M. R' \
margin: 0px;
4 m. \7 Q3 \+ A" I: @2 z
padding: 0px;
- ]6 U( W2 W* D C# X2 V0 {
}
# M2 o, q. q/ Z# E$ l2 R
#pic{
) j4 N5 `9 u) H! {( }
margin:0 auto;
8 Z& k" l% ~* Z( b, k. ]
width:800px;
2 ^ M6 G6 @/ {9 t: b# [) |
padding:0;
- E+ ~0 @) ^) @& }1 p
border:1px solid #333;
e9 M+ P, p8 U# V( A
}
, M, A3 E5 J2 a& Q6 c
#pic img{
; y V6 G; {. Z4 L% N y
max-width:780px;
3 R$ A# f( E' a8 d: D* K
width:expression(document.body.clientWidth > 780? "780px": "auto" );
, W9 S$ V# K' [( P8 J
border:1px dashed #000;
& q( X, U$ Q4 g" w) z0 F+ u3 \$ ^
}
- P+ W) @! e! i5 n& R0 z* X
-->
% C/ U" ]: o- x3 k
</style>
' E, H$ W( Q6 Q
</head>
4 E* Y* Z. K! H) X% J' z
<body>
3 G0 n" f! O4 s W3 \2 i! K5 A9 F
<div id="pic">
; L+ |' s! n6 r/ H
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
; ]' F' i% P" w) P' f
</div>
9 ~+ s: c; F9 `1 J. A: z# o$ j
</body>
; t( m7 k" X" D9 J! \4 i6 Y
</html>
$ F$ I$ I& P1 ~' j- B( b C8 \; p
( g% }* M9 R6 m0 |
百分比适应:
( d6 B7 F2 G! O( O. Q1 Q# d( \
以下是引用片段：
5 u9 p" [" T$ `( G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 s2 s& I2 W, L# \/ L4 m
<html xmlns="http://www.w3.org/1999/xhtml";>
: `4 w$ E0 w3 L- r; b- p
<head>
6 V6 D( I1 n% I4 m B% ?' |
<meta http-equiv="Content-Type" c />
; H6 j K3 ^/ S! c& t
<title>css2.0 VS ie</title>
2 H5 q. \- b# I$ s; k) Z
<style type="text/css">
( K+ H. f& M. y1 M8 j( n- X2 D
<!--
' u$ g. i9 p# R' O
body {
8 c/ S/ B( V6 B( K' e
font-size: 12px;
- R$ S( p+ y1 D0 U9 m
text-align: center;
: Z' y6 G9 ~: q6 M) t
margin: 0px;
0 V x6 ~1 j7 \
padding: 0px;
: X+ R" v1 k* n1 q% J4 e3 D
}
) l9 w1 U; @: {
#pic{
, N6 ?" Z, G& C' k
margin:0 auto;
2 F! Y( H. e- U: F3 Z
width:800px;
; l6 z, X8 i1 S. v; K
padding:0;
' @9 ~8 T9 f6 r4 Z/ b8 ^
border:1px solid #333;
}) J% `' D6 {" v4 T# b* P; L" T
}
$ j( ]* v ]0 o1 Y% T3 A+ u- v
#pic img{
" x0 T4 {% ]+ |7 v7 ]
max-width:780px;
4 B% q9 k' P" f2 ~/ L! w* e0 A
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- Q' M; ^, k* @- T2 Y$ E4 m
border:1px dashed #000;
' y6 m# _& R |: c7 F/ h, o w
}
8 Y& H$ w& I9 X5 b0 ?. k, `
-->
3 Y, D& c# Y$ E0 c
</style>
! P* g0 G) x# D x
</head>
+ G0 i2 b! S. \ O+ e0 c
<body>
7 z) W- d3 a# ?( T' ~6 R4 Z
<div id="pic">
& m8 r" P d1 ^9 T; i
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
$ m6 d4 }0 F. ~* N- J
</div>
5 n9 ]3 l$ @, U4 y- c! B. P7 `
</body>
0 S3 v3 B' S9 o. u' Z9 A v3 g# y
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
