标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' `: g, ^7 _" E! v: h
关键在于：max-width:780px;以及下面那行。
T$ @5 V3 a5 x; q- g5 ^
固定像素适应:
; B5 p/ z, W; g6 ]! p8 Q9 q
3 K9 n9 ^! C6 u0 L4 w8 n. G* K
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> 以下是引用片段：
. q' Q8 V" L5 C
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ E- r0 i7 X: T2 n) m& t+ q* y
<html xmlns="http://www.w3.org/1999/xhtml";>
2 z) E+ W6 F( {# Y, q2 d1 C& J
<head>
, r8 x$ P( ] s- F! `* F
<meta http-equiv="Content-Type" c />
1 N' e; X" [0 b, {7 \" u4 J
<title>css2.0 VS ie</title>
; V' C6 D9 [4 x& c5 G
<style type="text/css">
- O8 f. H. X0 x' H# p
<!--
, A8 j' T1 T( x/ y) {% E2 Y9 S/ s! m
body {
1 s# @$ ~, z' t8 N. J( k! c6 n
font-size: 12px;
7 {# y4 `4 d4 j
text-align: center;
- g: i3 U) E$ I
margin: 0px;
9 b4 ~" P9 i8 v1 {) H) Q
padding: 0px;
0 ~; p7 ~3 n" _4 T7 @* _7 Q! A* h
}
! B$ Y2 k+ q, Q4 H5 `. j3 z
#pic{
: z2 t5 z' H- U- m
margin:0 auto;
: t# c# H$ g0 [2 M- q
width:800px;
& p' i$ H# u2 D% @
padding:0;
, g& i) D, W% k
border:1px solid #333;
" L: v' B) v, o1 V/ D; w
}
+ L1 @' R9 }% X$ A
#pic img{
" T" Q( `' x& m% }; B0 h
max-width:780px;
( H. p8 ^7 g* B( }
width:expression(document.body.clientWidth > 780? "780px": "auto" );
. d6 X. _% T6 Q$ g# f
border:1px dashed #000;
8 f# O; A. O2 u- H: l
}
! p* C* ?& b- r7 g
-->
# W/ i' M" u! U# p3 U4 n* T6 m) D
</style>
0 Z! [2 S& M& G [$ {! n
</head>
. p7 b7 ^- Q1 L
<body>
" n% w f' c! ?/ V
<div id="pic">
9 F, p/ g: B$ h4 L
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
/ z5 K4 \- o. a' V E# Q% [
</div>
- b: v. A G9 K2 [5 N: a; U& i2 Z/ `
</body>
1 Y& S. q k* s: `1 q3 ^: Z
</html>
3 M1 S# S$ e" r* h. z! ^
8 W: c l. D* Z; ~9 g; A
百分比适应:
/ E* l8 x! N9 w- {4 u/ i+ @; z/ I( U
以下是引用片段：
' D( I( d9 _9 i/ [
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ \0 v9 ^' v8 l. i
<html xmlns="http://www.w3.org/1999/xhtml";>
" A) f L/ e' k! K2 J
<head>
) d8 K; r% O8 H' x5 ^/ q% N8 ^
<meta http-equiv="Content-Type" c />
& N# J" f7 m i7 Z) @/ o9 _" E
<title>css2.0 VS ie</title>
# T8 j: J: o: m5 N# H' w5 f3 P) p
<style type="text/css">
# Y' K0 H" h2 x
<!--
# B4 }$ S4 [& @5 y
body {
6 v' a+ r F( n
font-size: 12px;
# Z' C- b6 C" {( I# z0 [8 W
text-align: center;
4 l! `3 ~" s" Q4 R/ E) V2 M; h' w8 [
margin: 0px;
) s- H4 p( `5 q) M. x, _
padding: 0px;
: c6 t0 s+ q. K3 p O! A
}
% [/ `( B; w9 P# ~
#pic{
8 D3 S; z/ L, l8 M& v5 ^9 i
margin:0 auto;
; |& o- g2 h0 D# ?( s$ C
width:800px;
' S0 @, a! L: R" G/ ?( S& H$ D
padding:0;
8 O4 h, r9 A; j# Z* d7 p8 e% v" P
border:1px solid #333;
: C, x* T: M" B) R( @ a
}
1 L# Q+ b6 M: C0 Q( W- ?
#pic img{
$ a% L. _ `" A# @, Y; r5 w$ V% E8 z
max-width:780px;
: ]) S+ h7 t& j5 G% n
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
0 x# @+ @* e6 U! F0 j# _
border:1px dashed #000;
+ g* u) _1 e, U9 H% Z, S0 L
}
1 i4 P6 E6 U9 l& t$ _- A- F
-->
4 ~' a+ ~' D5 \- [ o" _# K9 l5 t
</style>
5 p- J& t; D, @5 V2 `8 C/ \
</head>
" E9 k( b u$ m; h
<body>
1 Y% g7 Y1 I6 b6 \7 \ r; N# h
<div id="pic">
5 Z% I* N" o: k# d( A
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
, }& `8 v5 i+ |
</div>
. S$ H5 M% j. Y& H
</body>
4 E4 L1 M' h9 s* O0 h4 `0 U
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
