标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
; ], W1 d5 @2 ^; W6 y2 y4 i, ^! ~
关键在于：max-width:780px;以及下面那行。
' c9 y* A2 Q: J% T
固定像素适应:
2 s2 \- {! j3 r; N( `6 P
' ^* L) f* G) {1 n
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> 以下是引用片段：
' _( O" F I4 ]5 {- E' _
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! Q9 K A. e' `+ @9 G: R! ^
<html xmlns="http://www.w3.org/1999/xhtml";>
# |: B' Z& r7 r1 f/ K6 V8 f
<head>
! \+ o# r' w9 |1 d$ F
<meta http-equiv="Content-Type" c />
4 l0 w; m" b+ V; W( r: u
<title>css2.0 VS ie</title>
5 j- N0 v9 x. G
<style type="text/css">
/ X& D1 |" h, ^" n, N
<!--
! ^+ j) r( M% f4 F$ x6 f: T5 N
body {
4 T! [6 `9 f4 L( T+ @) J/ _
font-size: 12px;
( k/ H" U: u- n( X3 p. w8 i. A
text-align: center;
9 N; i- x8 {1 x. y* T
margin: 0px;
8 h9 N! P1 A) V
padding: 0px;
" y5 ?5 \! ^3 e' l; i* l
}
$ @4 b# ]. z2 f" H' X% G8 ]* k1 d" A
#pic{
4 w- P1 [6 ~, c3 Z& h7 c
margin:0 auto;
E1 o' L( c3 u1 x* | D4 X R+ E
width:800px;
1 P' ?" R# s& U
padding:0;
, L6 ^- w8 h, I2 C$ Y! B( Z
border:1px solid #333;
) F/ V( @+ h& a; T, ~
}
/ f+ o3 ^1 N% ?0 h$ V$ t0 ~+ m
#pic img{
+ g. |+ d. p; \7 K M9 {
max-width:780px;
/ c( q9 r1 E- y: Z) _3 {. `
width:expression(document.body.clientWidth > 780? "780px": "auto" );
8 O4 u0 z4 b% Q& c& `! s
border:1px dashed #000;
% a* O* S2 P1 w2 `
}
( h3 V2 C n- T# `2 n
-->
$ P. K. N% b6 P
</style>
: \9 M. b( c2 l8 k" E
</head>
" ?4 r$ w$ A* C4 J4 T
<body>
+ W7 T9 G" ^$ @* R
<div id="pic">
, e6 c+ c5 } c7 G8 g
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
% I1 Z. k4 j; o+ ]& ]# D
</div>
; a& c8 P- [/ e. r; e
</body>
- \ m2 q* Y* }+ v& Q" {
</html>
% [1 o+ b; {5 D) _( s: }
! a& A: g) w5 p1 ]$ C Y
百分比适应:
" }* p( R% c- M, i. [9 ^0 T2 m
以下是引用片段：
) R3 Y& Q. p0 R" t5 ~2 S5 V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ m, l2 x. Q: l1 ?) n4 v
<html xmlns="http://www.w3.org/1999/xhtml";>
) |; k. z, d2 y' W3 I, R& O
<head>
, }8 n: I4 Y" q# B5 [2 k
<meta http-equiv="Content-Type" c />
* M5 h4 S& k: ]0 @1 \/ r0 r# o
<title>css2.0 VS ie</title>
7 s C' r f; h- ]/ J
<style type="text/css">
! m$ j% _9 d4 x- c' F
<!--
, r4 y6 f& A! i6 C2 F
body {
; w. q- T9 l) ?: D2 b5 C
font-size: 12px;
7 u& n1 q* R) i- l
text-align: center;
P' C( b6 H& d4 R5 K
margin: 0px;
. Z; ~8 `* \, Z, b9 i5 ~* N
padding: 0px;
& R$ u- i( N# ?, r# `
}
" u' K( [; V7 M. x) [( G4 d9 o
#pic{
( A5 }( E2 ]& m
margin:0 auto;
" n. [1 H1 ]2 h
width:800px;
0 H, e" {1 `7 q/ J" [1 ^0 H& \
padding:0;
" e+ q; D* w: A
border:1px solid #333;
3 t* k/ p6 }( l) \8 T# E
}
) W7 {8 S, @# z
#pic img{
, \* j3 X2 B) x+ c' t
max-width:780px;
G% T" {' |' V, T" q" `% W
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, j- U# U0 O, {" U$ h
border:1px dashed #000;
k8 {' n# S$ L- X: o
}
5 R# U, E+ ?2 U* E& w: E
-->
1 }- C# a1 x; ^! n
</style>
, U4 ^ M& Y' U9 ~2 ^/ R- M d0 o
</head>
' p: @3 P7 ]4 o, f2 N
<body>
0 `, O4 Q& A; M# A1 D Z& \
<div id="pic">
, W" U9 Q& n" t# U
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
: A+ Q. z7 {0 w7 X
</div>
i N: U p* [
</body>
, }/ w+ U8 I! t- k w
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
