标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
& X7 j- L1 B, l/ u
关键在于：max-width:780px;以及下面那行。
) M8 f; {% b; I( \4 b
固定像素适应:
- m- r/ ~# J- T7 A$ d: w
5 V+ I6 u8 X, h/ b: i/ l; Q- f6 q
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> 以下是引用片段：
0 }1 ^- P) J9 f- p0 B
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 i7 _- r/ m( W. O* W# ]* y
<html xmlns="http://www.w3.org/1999/xhtml";>
5 R+ B/ i8 C i6 `& }
<head>
* p& [9 v2 d! I
<meta http-equiv="Content-Type" c />
, y) H2 g3 B9 \' F
<title>css2.0 VS ie</title>
! H7 a9 f5 l9 ?0 O L& l8 w* k
<style type="text/css">
$ I" q0 u( o& {" o+ B
<!--
6 L8 z1 n6 R% B
body {
* B5 }1 k, q& I6 V5 o
font-size: 12px;
7 E! e; W7 [; I% C# s, Y6 x8 {
text-align: center;
8 l3 P! o$ }- R9 j/ E" Q4 E+ o$ Y
margin: 0px;
/ s5 Z7 |6 G! U* k
padding: 0px;
- X7 Q) N3 `5 u
}
: `- }, G6 _& [) K7 K: E
#pic{
, |1 z) H/ R) f) o
margin:0 auto;
" @/ e3 }* U/ o( u
width:800px;
' f2 z) T# l5 E
padding:0;
$ S2 r& k; k; r/ Q1 H
border:1px solid #333;
0 i7 p) ]9 L% j+ ^( i0 i7 B) c' c0 h
}
0 _: Y, X# D% @ K& O
#pic img{
- ~ g, R x0 ^
max-width:780px;
2 y7 p1 o$ @& _. S
width:expression(document.body.clientWidth > 780? "780px": "auto" );
( n% D( i% Z' R2 i1 j
border:1px dashed #000;
$ V( B/ r6 I, v1 Q
}
; w8 T* ]$ x6 c9 g' S( Z! Q% T
-->
F3 k9 }# d5 @5 D! @3 |
</style>
2 L" Z( }# I) J! F( B' \4 D# I
</head>
8 c! A+ N5 p1 G) [& U7 c+ [
<body>
) Z9 T+ r7 Q" |( u( A; c4 i* R: P. D
<div id="pic">
5 w. _' E2 l4 t1 b3 p
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
; ^. y+ Y% P6 @0 x! _% @/ ]
</div>
9 `4 |' f' |0 L4 a& T$ A8 D# Q& e
</body>
8 N& z: F( B$ u0 c, J5 [" Q, `( C
</html>
! v( D7 ^& o3 g8 s- {5 [4 o1 d# A
* `9 k. _9 W! o( v+ ?
百分比适应:
1 k1 u' ~$ u$ l4 s! {+ ^8 G7 o) `
以下是引用片段：
3 G( p1 P' `4 r8 p6 C& k" y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: o6 V5 E5 ^/ \
<html xmlns="http://www.w3.org/1999/xhtml";>
0 x$ U9 A4 K k$ {9 l, u( v
<head>
. q( A2 j# c$ I1 `! o2 \/ Q- U
<meta http-equiv="Content-Type" c />
; m5 [3 A) T' c, _" l% \
<title>css2.0 VS ie</title>
, {1 P8 x. [3 L4 x0 ]# {( ^ v P
<style type="text/css">
0 w" j0 O& {9 Y8 _% i1 j# }- T; X+ B
<!--
7 {# B: c1 s* [
body {
% l5 v) i' C1 G
font-size: 12px;
0 c3 m/ w" ^2 i( L
text-align: center;
% `& L" h! M) q! J! U$ ^1 W* p$ f
margin: 0px;
( @3 D/ i' h& h: _! n
padding: 0px;
, @% y- w# M" v8 o( `
}
+ I- E3 T. c1 _6 v. S
#pic{
* L+ o. }! p* p" M6 M
margin:0 auto;
/ {" c) D. V0 R* C0 C
width:800px;
6 ^/ {6 R3 x0 t: |: k, S
padding:0;
* _$ w; }, l& G( {& ]
border:1px solid #333;
1 g$ E6 N6 ^. C' `% h5 e
}
+ C( ~% K7 c. w. U- o2 `8 M
#pic img{
) N1 }0 w$ [ e% L; F! ~; D
max-width:780px;
2 y( G" w5 J) e+ r2 _
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, f! N- Y/ y; w' a2 x
border:1px dashed #000;
& z9 ^; ~- c$ M6 k
}
2 }$ M( T* u" Y$ u
-->
3 |1 D/ v9 K$ T( V: `# k+ z( A
</style>
2 h: `. }0 T/ O$ z3 x
</head>
3 n: j0 h8 z6 w' d- T: ^
<body>
- ^' N; X0 `! @ I
<div id="pic">
, l3 |8 Z4 k6 g# B( A& a4 g
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
% _6 Q7 o+ c. r/ J! L6 s
</div>
2 j+ U1 o9 E0 i6 w7 u
</body>
# v- I. t5 Z t6 U% z
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
