标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
& v( j/ k6 x; [! S/ p$ J5 M: ^' X
关键在于：max-width:780px;以及下面那行。
- \- C- L: Z/ _8 I
固定像素适应:
0 a- ?7 ]8 a* n2 q& A) K0 Z
( [& p( @" I' V/ w) {6 i- P7 M
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> 以下是引用片段：
' M! f$ p0 N6 C
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 _, V: L7 x4 t; v$ P1 F+ |' ?
<html xmlns="http://www.w3.org/1999/xhtml";>
" @) W; `$ U; G: Q5 ?) x3 X% u% L1 g
<head>
- \2 {% n7 N. e' m+ y3 Y
<meta http-equiv="Content-Type" c />
5 O$ L5 I6 ^ s& A: @) C
<title>css2.0 VS ie</title>
; l8 N% I p1 l8 {" \ q" E
<style type="text/css">
; e8 y' ?# T" B+ G
<!--
2 n* @1 H" q: y4 w! c: ]; h9 |/ Y
body {
% \3 k; f T- X- ]5 x; ^
font-size: 12px;
& @( h6 g w) y+ S" _! l. W3 p# Q
text-align: center;
; S$ U. V% H- v! t3 Y- {0 U8 h
margin: 0px;
8 ]$ s" C7 x5 S/ a- i4 e" Q
padding: 0px;
0 K0 p) ~ S1 u8 F8 `8 L
}
! s f/ k6 I0 l8 |) A) t' @% N1 C
#pic{
& c7 N6 m( L( o" z' E% q# s" ~
margin:0 auto;
- t3 o' G7 Q. ^7 g. r7 K3 ^# g
width:800px;
9 F+ |% d: N( K8 n, Q: s9 S8 R
padding:0;
% r5 ? K& L$ I( ^) @( V' o
border:1px solid #333;
+ f8 v* i+ B3 t& @4 L3 n/ u
}
& x6 f9 x' W E* f* }4 |1 u
#pic img{
/ n8 \) j, F) N: H4 i9 {* g
max-width:780px;
3 ^' R9 U5 D4 z2 p! A" U
width:expression(document.body.clientWidth > 780? "780px": "auto" );
: g5 d5 e q* [9 J) i+ N
border:1px dashed #000;
! ]/ E% k% w" t1 | D
}
$ a1 t4 j0 b2 n( ^
-->
8 w% k9 D* B% y* }7 N3 D! U( s
</style>
& Z1 y/ k; P Q: k, I! e
</head>
' I& F: |' ^' j8 c; j
<body>
# z- x7 ~* q4 q4 T2 l: A
<div id="pic">
3 O7 u9 A6 |& {+ m& v: U
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
. k9 i+ I f% x3 F% V
</div>
, W/ u, H" r; Q
</body>
1 W* k) C5 Q0 `2 v
</html>
8 `0 B* R4 W& B$ `
$ s) z2 Z$ w. ?" i$ ?8 p
百分比适应:
* o0 R' n' m. p
以下是引用片段：
/ U" Q/ d X; n0 z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# _. |# R1 r7 y3 O8 g
<html xmlns="http://www.w3.org/1999/xhtml";>
2 @4 q5 ]- P1 G! K
<head>
3 Z/ |8 g; H7 N# {" ^4 S0 i
<meta http-equiv="Content-Type" c />
0 w; ? \( o# d9 b; p6 u9 m" A% o, S
<title>css2.0 VS ie</title>
, T1 R6 _, d2 Y! S2 |+ K( x
<style type="text/css">
3 R5 ~5 T& d# B# i1 m1 R0 N
<!--
+ g1 ?$ u4 |8 t1 X1 k
body {
% {+ [, F0 d2 u
font-size: 12px;
" O1 B" X8 t6 [4 u. L
text-align: center;
6 R6 h$ H r! K8 S
margin: 0px;
, j" s# X- _2 u
padding: 0px;
( _5 {& r$ z5 f& g& z% ~; K. V
}
3 U/ X& V @' ~' a. m+ C, F7 Q' }
#pic{
# o6 I& `$ d( n# g7 L
margin:0 auto;
# M8 H9 M: K9 |9 T3 v
width:800px;
) E. I- {. @# n; j0 w" h$ o
padding:0;
5 \6 r0 ?/ p" |8 f# q" h; K
border:1px solid #333;
+ J% o$ H# e+ i# {
}
: d* P9 N1 ]4 d- C' S
#pic img{
0 \3 \, p' P$ c& x
max-width:780px;
1 r+ P1 l2 l0 j) `
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, R, x1 k7 b }- `
border:1px dashed #000;
8 A: T' \% ^! M. Y! S
}
8 _1 O/ E; f2 ] j5 L+ Y9 }1 c1 m
-->
/ l: m9 m+ c. ]6 e/ B& w
</style>
" M, A, T$ S) ~5 j# t7 T( v
</head>
2 W* P- P- V. ~
<body>
, j8 ^( X! a; c9 N3 I* ~0 w
<div id="pic">
# m9 L) t% V- V) x2 s! u: e @' O
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 f p f% L/ q3 j/ M
</div>
2 q$ Q2 t% ]% |
</body>
0 D1 e% |6 o, S# C2 L! ]: Q1 t$ \' p( s
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
