标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 J2 J+ i! d9 X! B. x
关键在于：max-width:780px;以及下面那行。
* O' w4 W. j# `, h1 M1 Z
固定像素适应:
- T* ]- X" T) ]# R" G
2 ?! c# R: \# f3 L% P! I
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> 以下是引用片段：
' u9 G; y- e( S3 P, d5 \
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
7 x% I! A8 u- x! _3 i8 @
<html xmlns="http://www.w3.org/1999/xhtml";>
: ]% s1 @. f+ j+ Z r. E2 ]
<head>
$ b2 z2 U, s9 N4 N s% o/ l
<meta http-equiv="Content-Type" c />
- b6 v) ]4 ~* m3 ?( b( T4 E
<title>css2.0 VS ie</title>
, R+ Q% B6 m$ {; s
<style type="text/css">
% Q: S0 o t8 `
<!--
; }5 k! g( V. N3 a# ^$ Z# B
body {
& P6 N& l' w5 {: ] |6 [
font-size: 12px;
8 R8 K% `- h# \) B% ?3 ^0 N% D
text-align: center;
3 F0 e! P' ~4 l% g, C! I
margin: 0px;
! O$ u( a! S/ T8 D4 i) c
padding: 0px;
; p/ w. [) i$ R: R8 n1 _
}
0 x. t7 w& E& B1 c- x: M4 P3 z
#pic{
8 `3 u+ j! n& T/ V" V! Q
margin:0 auto;
: G4 K" u$ Q ]/ Y+ D& k! s
width:800px;
/ H' ^: D2 G @3 {0 Z
padding:0;
: w7 C% K' L; k: j- L
border:1px solid #333;
3 {* c% ~" g4 F+ y7 p( F8 }1 t
}
- u) D9 `& L& S4 M
#pic img{
! o/ S" u; l/ @' g7 X4 p7 |
max-width:780px;
. [& X; z7 |: \: e
width:expression(document.body.clientWidth > 780? "780px": "auto" );
$ V: H# E/ I0 U; |1 w1 u
border:1px dashed #000;
/ g9 B3 Y Z7 v" F
}
$ F4 q( C0 I8 x
-->
+ a+ K5 h- { J: i) g
</style>
6 ?8 {; J7 y+ z" r8 h4 i
</head>
$ }. E7 l3 [) r5 }9 ^
<body>
* i m6 l2 _5 S# [% G) H# c: g2 [
<div id="pic">
% U* y8 r0 m! @, e
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
/ S4 s6 L* ^- O# A; P
</div>
7 v3 u! _$ w' Z7 c; [
</body>
! }- [$ c. x' l! B' x& f( u
</html>
4 x5 S: v( K3 e1 V
- `5 J3 A o! j' l1 [
百分比适应:
# d% x G) P5 l# q2 s
以下是引用片段：
0 P0 \2 p- V2 v6 J y+ l
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. ~$ P, ~& _2 F/ \/ Y' H9 J
<html xmlns="http://www.w3.org/1999/xhtml";>
& h% o3 t+ A" c0 s2 |3 V
<head>
3 |( D- G3 H1 w7 L0 p
<meta http-equiv="Content-Type" c />
% P# X6 }6 x5 K8 Y- z; ]3 h
<title>css2.0 VS ie</title>
' t" _/ @; \1 }1 b
<style type="text/css">
2 i: E* m( z( ]; u
<!--
2 K" [) l+ R1 J1 [; |
body {
6 c0 R m6 |/ n, J: M/ p
font-size: 12px;
$ j7 V6 [0 `( d. O7 ~
text-align: center;
0 F! N5 o( L: D! `6 Z' f, m
margin: 0px;
1 Z/ B7 f% z( g; y E6 B
padding: 0px;
# [. s1 L; B; q$ h8 {
}
% p+ M: _! C) z# L3 H
#pic{
' Q- u0 }: c4 o' P. r1 y
margin:0 auto;
& a2 X8 D+ [2 C5 ~
width:800px;
C' a5 g3 @. `9 g( ^2 N* f) Z
padding:0;
$ [: N7 @: _ r
border:1px solid #333;
- @1 l1 B8 z* ~( Y- V4 n
}
. D3 X1 v7 }- p9 a+ v( S6 b
#pic img{
# {* J& j) x5 j( _
max-width:780px;
; D1 j- D$ c4 W5 [0 m0 p
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
2 M% o4 N- V2 c9 s; B' K
border:1px dashed #000;
; h, m; t) ?8 m/ B c, @
}
$ `; C7 K3 K5 W% r
-->
) j/ f+ l2 W- Z2 G
</style>
4 _" h2 C) m, l3 Q/ Q; Y# z" @
</head>
' h5 K; }4 `0 b" p. F6 Z
<body>
) g G8 K5 a* {& o
<div id="pic">
6 \) K1 j! @' m/ J& Z; i9 ?
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 M5 D& {/ }. g7 H1 q; s
</div>
5 s: f1 K: A0 o/ Z, U
</body>
8 {2 G& Q1 x, q. Z4 o$ {) e
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
