标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
( V D' O) ]8 U2 k; V" ^8 g7 e
关键在于：max-width:780px;以及下面那行。
$ `8 t7 Z" C2 i8 ?+ j# ^" x8 c
固定像素适应:
/ h! F- Q( ~7 |; N% N, h
; W" B% C0 L; s/ L
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> 以下是引用片段：
8 }1 T% T7 ~! a) [- g a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; m3 o3 b% T( Q v; z" {) q! g
<html xmlns="http://www.w3.org/1999/xhtml";>
# P3 ^5 d* b! V
<head>
I* Z1 n- ~5 I/ o) F3 |
<meta http-equiv="Content-Type" c />
% n3 w; n( c. H% d
<title>css2.0 VS ie</title>
# h- s! Y& {+ _: J$ e
<style type="text/css">
8 R. R( v- l2 Z- a
<!--
% H1 Q7 z$ N- G4 b D
body {
, w# q$ K* v5 l- C, F h' H
font-size: 12px;
Y3 Z+ d5 e8 P1 Q9 f
text-align: center;
+ c8 x* P* O& ^" T
margin: 0px;
& {7 q ~5 H [' O7 q6 g5 v. K
padding: 0px;
t& B& ?4 A0 T$ l0 k0 [: C
}
$ I/ X* T6 v# N
#pic{
0 J0 L% e( V5 I3 Q7 O2 f
margin:0 auto;
& c! W6 d Q. d2 P" o; Y
width:800px;
) w5 x& ^; | A9 D- t6 a; R
padding:0;
% Q* M8 r5 G9 x. ]
border:1px solid #333;
/ X7 ?2 }: l2 J2 j2 B* V
}
: D8 P8 g) }2 u' c: z3 A
#pic img{
7 q2 S; ~0 p$ T
max-width:780px;
; |/ _; z, e+ ?: ~9 c. ?
width:expression(document.body.clientWidth > 780? "780px": "auto" );
; ?" o, g7 M- ^' h4 A) F/ h4 U' l
border:1px dashed #000;
: F$ x3 Q0 s+ n
}
: s9 Z5 n, o/ n' Z
-->
. E7 W( G; A' U+ Z2 ?! v) ]! x
</style>
( M8 ], e1 i) k
</head>
; {5 D* A! k' S# U0 q( c, U
<body>
& W7 ?7 ]: x% g0 z+ }9 m. }
<div id="pic">
! y5 K) Z" j5 x& b8 B
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
6 z+ ~4 ]: J! r/ n# h: c
</div>
$ a% ^: Z2 C `4 i) j- I3 w, @
</body>
. q2 e& D7 T# o* c: |
</html>
: b: f+ Y$ j: W2 Z0 P% s
% l" M# W& l, f/ n+ k _
百分比适应:
8 Y" F4 R* I, I1 X' K) n$ T
以下是引用片段：
% C) W# g" Q* Q8 u6 D J C* i5 `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ @7 X. K7 Y0 x1 B- u" \
<html xmlns="http://www.w3.org/1999/xhtml";>
5 p( o1 g! `1 l5 N* X* X! N
<head>
/ ^& b9 j$ k" i" K* v2 w
<meta http-equiv="Content-Type" c />
+ o- P& r7 O" R! U( k
<title>css2.0 VS ie</title>
4 {, G$ M4 }8 h e) l: W
<style type="text/css">
8 f2 h" f! |7 E; d% U- O. |
<!--
5 n8 K6 C8 K+ \6 b# A4 I
body {
; p& A2 `+ s3 V
font-size: 12px;
% R/ m$ x* ^5 z
text-align: center;
I% I: |2 [1 E3 o! v
margin: 0px;
4 l+ _2 K/ s: @- p5 s
padding: 0px;
) Y/ m9 n ^& i, T& ~
}
9 C/ j1 w$ V" P( h1 y- c# ?
#pic{
; e5 o( N& C |! @
margin:0 auto;
* B3 x, x1 x2 F4 Y4 m. K
width:800px;
+ {. C1 r% k" ^" I {
padding:0;
' x% h% a: E: {/ w; |, Q: z
border:1px solid #333;
4 S+ u; @$ e8 C& R; F( ]' q) O
}
# f, u7 }0 W) c- ^% v' v' B: O
#pic img{
4 [0 x, ^' U g8 u0 q
max-width:780px;
" W, h( {- m- G5 A
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
# q3 A& s0 K0 q# h- m
border:1px dashed #000;
5 t1 t/ Y. o b {: X0 r' w/ T& ~, H1 E
}
. D$ ?' F* n/ S
-->
: u8 B/ X3 I- ]4 X' N& }
</style>
0 |# \2 |4 D! v0 D: j$ G
</head>
6 Y8 w$ g; X; Q
<body>
, Z3 U% v q* Z
<div id="pic">
& Y" P" z6 z- Z' W9 O
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
# |9 v$ d, c7 C% F1 `0 S4 G1 T
</div>
. _6 c+ @: B6 g% V4 R7 s' m1 S2 [
</body>
' O1 C2 g3 H% [6 V/ g; [* |' o5 e! k
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
