标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
* q; m" U$ P5 U! R
关键在于：max-width:780px;以及下面那行。
3 w& k9 K) H2 n- D" ^
固定像素适应:
* I$ @* O5 V5 C4 r- F
! P# g; x0 z! B, c, \2 F8 Q9 r
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> 以下是引用片段：
# T2 S+ f' Q0 y- A2 F/ y2 w
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; u% t8 n. P; u2 Q7 K
<html xmlns="http://www.w3.org/1999/xhtml";>
/ z# v; a& P2 _; n. V
<head>
# h7 j& Z# g. D- d4 e! b0 ]! k: p
<meta http-equiv="Content-Type" c />
8 o' H7 F5 P0 ?/ X8 g* i
<title>css2.0 VS ie</title>
# u x Q! V w- i+ W0 T% b# H
<style type="text/css">
; L! w- z, Y [" @: z
<!--
4 [: H7 ?# T& x: R, ]; k$ g
body {
. n& Y" }! x) I# l- T6 |& Q" M
font-size: 12px;
; V- }5 M0 }( S$ O& N6 j% |
text-align: center;
; |3 Z# S9 Z% O4 f7 J
margin: 0px;
* a2 Q% p; H$ Y; U( T, u/ Z- L- I" Z
padding: 0px;
, R" w4 w% {9 B, T* C4 W2 Y
}
- T1 T; c* b1 I/ r3 G
#pic{
& z1 F6 \% J* ?5 V
margin:0 auto;
' c; H5 n$ c2 ~5 M5 E) _3 p8 D
width:800px;
' u3 e. B! [7 O0 |' n E( ?
padding:0;
& t2 Y1 e1 w9 C$ W4 o1 L* M: s. S
border:1px solid #333;
' X5 e2 p- _! [; n( P5 g) ]
}
! Y6 ~/ n& s7 P
#pic img{
5 V: K8 W1 i" x( q% z' ]2 g1 a
max-width:780px;
+ u' B1 ] Y* d- v) J
width:expression(document.body.clientWidth > 780? "780px": "auto" );
& Q7 ~) y7 ~( {% W1 w; D3 q' m
border:1px dashed #000;
+ y3 [% H% s# E4 v/ ~' R
}
7 ~1 b$ m* A4 @8 |, }& L
-->
1 b: k( I1 y( F# X% c; v( m; d
</style>
. e+ L8 S: x7 K' T: Q
</head>
9 N" @/ h. M' u
<body>
! x* L' h7 X5 r* r: B
<div id="pic">
3 |, c8 I: L$ [
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
1 l$ o5 N% I0 |& [
</div>
1 C4 s, t( ]" V% z
</body>
& R/ o3 ?( w9 C8 U
</html>
+ i+ b& Q$ k( S7 V# o5 P* R
7 @) f6 q* B i3 A- ~' ~
百分比适应:
- @; ~$ V# o8 l
以下是引用片段：
7 k4 J0 J6 @% D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 K7 B. J7 g% q& N. S4 U
<html xmlns="http://www.w3.org/1999/xhtml";>
2 U$ Q" P3 E, U1 ?& ~2 _0 ^0 h$ I
<head>
* }$ d2 c9 c4 t" N3 w. ?+ A( @
<meta http-equiv="Content-Type" c />
! u$ t& z( }! p7 `
<title>css2.0 VS ie</title>
7 _) ]. y" j6 O* P; U# u
<style type="text/css">
- p; e0 s1 ~( f# l
<!--
$ O% I9 @3 D' o+ v9 j, h
body {
7 K( X& E) z2 j
font-size: 12px;
3 Y% a4 O* w! r) ^9 {& c. O' E, {
text-align: center;
/ B. A: X4 m' x3 ]+ j- V
margin: 0px;
" X! v* o: F8 f% E/ y
padding: 0px;
9 z0 Z# w' l/ l3 o! d7 ~6 m
}
3 N: j$ B$ k4 a3 A0 ~6 S
#pic{
# \( K3 o# e( c; G6 F" k
margin:0 auto;
! {6 m- J- Y1 h5 t* |/ _. l/ G4 h% Z
width:800px;
. M$ C& O: g& t
padding:0;
! N0 L& v8 \5 s8 w9 D
border:1px solid #333;
: p! g7 q1 q" ?# s0 `7 p" F
}
" C* w6 q- R( G* _4 _( _, `
#pic img{
% p* G7 G3 w/ x/ _3 U
max-width:780px;
7 @+ \6 a4 @4 t3 c- ]$ e4 O* C
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
5 V6 ?+ N+ d' l
border:1px dashed #000;
1 V& I' @: q) h: L, i5 |7 r
}
' @- \8 ~2 p: R+ V; D
-->
i7 @3 v& T3 m
</style>
% {6 h" r, D, y/ g0 f
</head>
+ w9 H) m2 R' L) y- j! d' Q5 b' q
<body>
: z, [; p. `" e) R4 F Z' L6 U. c. _
<div id="pic">
; \ s2 @* _* C7 W
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
8 o2 `( J2 L6 m0 u
</div>
8 r7 H8 Z, B& _2 Z
</body>
1 U" n8 [: ]4 ]
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
