标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
. |8 i- `- Z/ _& ?) U
关键在于：max-width:780px;以及下面那行。
/ k+ v$ w# a4 B; @5 v F$ c
固定像素适应:
2 {' ~0 x# y0 L) }# ], y4 k* P
3 P4 C; A. v4 a0 `- m+ e% U& T) }
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 `" {2 w- k# H0 F
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( x; p: K2 O' u9 y4 N; \
<html xmlns="http://www.w3.org/1999/xhtml";>
! a; \( f. U& |0 A, s& N: S
<head>
; x6 V+ M: ~3 Z, k, X, S; v% Q
<meta http-equiv="Content-Type" c />
5 Z7 h0 k- k/ O1 z& n I; M( k1 Z9 K
<title>css2.0 VS ie</title>
" R: n8 s' @6 y+ h% c. H- i
<style type="text/css">
4 G8 l/ `- l) v( h7 x
<!--
# V7 n, \1 ]4 j. n1 P/ P$ i; h
body {
! x m4 [3 n7 e2 O0 d
font-size: 12px;
# }" X+ X- `& ?. E; N' t
text-align: center;
, t$ G( j0 ?+ ~7 C+ I3 ~
margin: 0px;
8 N: v: F+ i8 E# y3 i6 A
padding: 0px;
# S- p, |, s+ f$ L' t
}
8 @" T- ~, p" i
#pic{
4 p! [/ k9 e+ U7 F. j. t" I& o0 f% a" Z
margin:0 auto;
& \0 V! o3 U3 s( L! n: a" j
width:800px;
# ]9 q S9 z! v* r: V! R
padding:0;
2 b8 p% ~3 w8 V" d; ^6 r' q0 F
border:1px solid #333;
2 W, s+ J# G+ c7 m; d
}
4 |1 m# K; w$ N) i1 E
#pic img{
8 d# A9 R; v" O# S
max-width:780px;
8 {: R. t7 E$ _+ H2 `7 M
width:expression(document.body.clientWidth > 780? "780px": "auto" );
q0 {; f* H# V
border:1px dashed #000;
& }& K- d+ L W- _( B% B2 S
}
8 F) x/ R9 V. g7 q5 N
-->
( b1 R3 {4 D3 p+ B3 X; z& H
</style>
7 k, W$ r- x$ s0 P8 Z9 C4 X
</head>
. _* k' Y6 a+ _
<body>
9 C8 ?! s w. z8 T: F6 g: R
<div id="pic">
& ], ]9 v( A* p
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
6 s, @- T( d- k& _/ D3 N% {
</div>
1 X. r+ M' v) m- O' I) [
</body>
. C! K9 ~% P- t
</html>
( N. [# A) r' _5 x- Z$ g! d& a
2 T- U# [* m. [5 Z n3 J7 y! ^
百分比适应:
: H# K, B, ~/ S
以下是引用片段：
; j4 L# T7 r; k
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 P5 @# k$ D) f
<html xmlns="http://www.w3.org/1999/xhtml";>
. T% ?2 U$ G d8 @1 _# y
<head>
# D+ g; P+ r3 u0 G
<meta http-equiv="Content-Type" c />
" u; n, t/ g- s7 l
<title>css2.0 VS ie</title>
2 D+ b# Q1 _1 _) v6 e' p
<style type="text/css">
3 z- l3 L# J( ^) D' H& Y' o+ x
<!--
e* k+ D$ R: e/ R$ |* @( ]
body {
# @1 [0 v! a% K& E
font-size: 12px;
% G/ V. v7 e" s% D$ v% l1 J
text-align: center;
o# W( L6 W) i4 j3 r3 W% C
margin: 0px;
' t& Q0 m; r3 r+ W* E2 P
padding: 0px;
5 u, X! m% m0 u+ j2 o
}
7 `. T% w2 m& N& Y7 `4 C+ X
#pic{
. q( F f: U) n( b5 U
margin:0 auto;
2 J$ ~# [# A+ [* {( a( H- P
width:800px;
! Z& a/ ?( |7 s1 z$ B! o
padding:0;
7 t/ z6 `& w9 R) j1 k
border:1px solid #333;
5 X- H; s- C3 |! [5 n- ]2 C* R7 [$ Z
}
2 o' W* a' x0 y, k# s; p, k, J8 `, t
#pic img{
% ~* N: }: `+ N( t& l- `" h
max-width:780px;
& H0 G. u6 ?8 U0 A; }: e" n2 e
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
; G; e% w% ?- I0 f; H. X! I2 r
border:1px dashed #000;
: P: X h, d D' P6 F
}
6 U/ I8 J/ p1 g7 v+ S
-->
# T: l9 a' b" k9 N% R
</style>
! v' |, M* Z0 Z: ~
</head>
2 ^; E. ?5 E5 s, c5 ~/ J1 k
<body>
h$ v$ Y2 D# x& H2 P+ `
<div id="pic">
5 p- ~4 h) _& g! i: N) R* }
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
) b) M$ K7 k- {0 p
</div>
% H0 a) M9 b( }& Q3 ?
</body>
- I2 p7 l# F/ ?
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
