标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
; l8 S+ c8 l: ~9 \ V
关键在于：max-width:780px;以及下面那行。
9 h5 @( S" h- L |' C. C O1 ]
固定像素适应:
. h U! a* o; c3 x" c" n
/ e- t! o5 s# h4 Y8 P$ A( U
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> 以下是引用片段：
$ c2 o* |6 P! P7 A. ^6 B: g
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ I2 D, c6 r8 S6 E0 D2 }4 |
<html xmlns="http://www.w3.org/1999/xhtml";>
3 r- P# k! h& k3 c" ^
<head>
6 |. v4 R1 i2 H5 d! i9 N! u
<meta http-equiv="Content-Type" c />
* ^3 k! X# x4 o) L4 I
<title>css2.0 VS ie</title>
- w6 Q2 @8 `2 Z1 P% ~' T4 w
<style type="text/css">
" U' \, M8 j" }# j! o! k; f/ @4 q
<!--
3 @$ L! @( R i% B9 F
body {
9 G H; Y8 m# c( ~. F0 H* W. E
font-size: 12px;
9 V# Q( \. e p/ |8 m, l
text-align: center;
1 y1 E7 u9 ?1 n! H. M9 h
margin: 0px;
1 T* L* x" u9 Z1 b
padding: 0px;
$ i! u7 q! E1 y
}
: I- t" w6 ^, b# G ?+ O! m
#pic{
% U# `5 ]* I5 K1 c0 x" Q$ Y
margin:0 auto;
% x% Q2 P9 H/ G/ m5 W0 I
width:800px;
) ?+ q5 o( F0 ~5 F% W: ^
padding:0;
" r. g* h+ ~! G2 q# k
border:1px solid #333;
+ {: V% T# r F) R, b9 A5 K: }( M
}
, B) ?1 M* f1 G' `" F, H/ @. p5 y
#pic img{
+ n$ n9 W7 n! z! O" D
max-width:780px;
_' B* S% S0 W0 j' K9 Y8 ~+ e+ H
width:expression(document.body.clientWidth > 780? "780px": "auto" );
}5 u+ ~" g: w0 k$ J. V3 ?
border:1px dashed #000;
1 ^1 X P7 `. N h- A$ E
}
. k6 m% P4 k; E& E2 o- v# b0 n1 f
-->
5 ]0 z: o0 |2 V9 p
</style>
! z* Z$ q- R- K2 _1 ?0 J. V4 `. T, Y
</head>
5 [4 I @4 F% S4 R
<body>
% w( D% s# U9 |. G* \2 O
<div id="pic">
: e/ b% X* P* h$ [( J, Y" p% V
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
# Q& J! C, L- P9 h1 ~
</div>
( u7 p3 [" k/ ]% E) T$ U
</body>
" U: i+ h9 l3 x P/ h9 H
</html>
% ?* s' F9 |1 e
' x* P c ~. k" ~' W" v
百分比适应:
9 G z) a m" Z. ]9 }
以下是引用片段：
8 v5 X5 j3 F, C4 x% h2 m; m0 R
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& b, t x3 l9 L2 Z
<html xmlns="http://www.w3.org/1999/xhtml";>
3 c8 b' T$ r7 |: D$ _5 \
<head>
! L7 ~2 s, J* E/ }) o2 N% l( p
<meta http-equiv="Content-Type" c />
1 b& B) k. _( K& _! D4 B! A, J
<title>css2.0 VS ie</title>
" |( ^8 u0 [7 D* D0 K+ g
<style type="text/css">
7 `6 j: q+ u7 I4 T
<!--
, j$ {3 Q. l" n
body {
! d" }# Z. V/ e# O/ D; @
font-size: 12px;
4 p8 h& M2 L3 G. g/ j7 s3 h) e. c
text-align: center;
$ D6 O+ v( R* R* V2 j
margin: 0px;
% Y- o6 C- `" J1 O
padding: 0px;
9 d) x! B3 g- F7 S$ w
}
' F1 a# Q# K1 G8 |$ r0 L2 F
#pic{
' E4 a" Y0 }$ k$ [( G7 b
margin:0 auto;
3 }' U3 @) \: Z9 B, @
width:800px;
8 K7 \6 C/ g" t5 k! I! ?
padding:0;
5 U( x6 v7 L9 }0 W( S
border:1px solid #333;
" |+ r6 g. R, ^& Y
}
' D5 Y$ q; m1 a) T# Q/ C
#pic img{
( w: |2 C( c+ e2 v4 B
max-width:780px;
3 i1 d- G$ O6 |. E- z
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
) x: y* e) k% Y5 N- H; c, Q
border:1px dashed #000;
' n/ }, T }* l0 _
}
0 M( v' ?: z; y0 q/ q8 P# l
-->
0 }9 ~ n8 L2 u8 ~& W& n7 K
</style>
2 i6 U; q0 c/ `: b
</head>
& C- e! o9 B1 v [7 [# k$ i
<body>
( j3 l' ^& j! U& [7 Z8 q! z
<div id="pic">
5 Q, s' }" C9 _4 @
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
" p, p9 o, W c) e9 V
</div>
8 \) O9 M1 y9 I- P- P/ e% R
</body>
2 B `. Z _4 N( g) Y* o, @
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
