标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
l* I1 G5 p) h4 _
关键在于：max-width:780px;以及下面那行。
; N4 I1 O& s y$ t' {! o0 n
固定像素适应:
8 @' `1 a3 Q" `. L7 w4 Z: L% A0 K
. Q! o8 z6 b* N# x# ^7 E% S$ C+ v
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> 以下是引用片段：
! e @" D$ m; G: l- H" i( J
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 d/ [' c {- s" b; x
<html xmlns="http://www.w3.org/1999/xhtml";>
8 {2 e) F5 ]& U- g- ]
<head>
. K! g) M) K. G
<meta http-equiv="Content-Type" c />
9 S- e L% P: t1 `
<title>css2.0 VS ie</title>
) N# y4 ]+ G9 {/ c0 S3 C
<style type="text/css">
0 p) C9 k2 B2 V
<!--
8 ]! K. o9 l* R8 G; C, j) z
body {
# H* u# k9 B! [: ` s
font-size: 12px;
% }8 k; k& r. I+ h9 n5 U# j' @
text-align: center;
) c6 O: i& s: O8 J
margin: 0px;
7 ]+ @2 o+ P. s ?9 ^2 a
padding: 0px;
; @2 x0 I! x$ |# k: Y$ s
}
1 c; X W3 B* l4 w
#pic{
; D) O* _8 h9 L h' }
margin:0 auto;
# _+ ?" D9 x; `
width:800px;
" m; z+ c+ }7 b9 u
padding:0;
- [1 n* k7 j4 o$ M
border:1px solid #333;
8 ]& q& R# a% K3 J h# j
}
5 m$ T7 c2 Y0 y% |1 Y2 a& A
#pic img{
4 \& e; Z _3 _* v8 }& x4 a
max-width:780px;
- ]) H4 O( O; M7 m; S7 z2 _+ y. P
width:expression(document.body.clientWidth > 780? "780px": "auto" );
1 Q. C5 ~% G7 a* M) D
border:1px dashed #000;
Q1 v# M/ L, F$ g& H; @! A
}
2 q) K5 L) @( h% G0 d/ o) L# P
-->
! q5 j) n. w G1 Q+ E
</style>
' C/ }0 ?6 R& r
</head>
8 f8 @9 } @- [( Q+ ^7 G
<body>
1 p/ q9 P. H% ]6 L
<div id="pic">
- n4 @/ [5 q; d$ A
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
7 x- ?( ]# ` H" Y
</div>
3 Y6 M8 P Q7 u8 G5 l
</body>
6 i3 l! a1 Q4 T5 b
</html>
* s' L4 w6 P2 \/ k
K* a7 \+ T0 H2 `4 {* ?$ O
百分比适应:
. G f1 J2 v9 [
以下是引用片段：
# x* G, t/ W2 _0 t
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 U' }2 Z# g6 m' o+ H" g
<html xmlns="http://www.w3.org/1999/xhtml";>
' C$ h$ C- Q y, x/ }! A2 f
<head>
& i4 r6 U2 ? S+ o0 m3 ~. I
<meta http-equiv="Content-Type" c />
4 T. V6 ~2 o/ w: i( C
<title>css2.0 VS ie</title>
- c% m3 Q2 T T* ]) v$ U; u# s
<style type="text/css">
+ g4 _+ Q7 _9 W4 l( A: H
<!--
3 I, j, L b8 q( Z
body {
- M5 h1 K* F, Y/ b0 q' j
font-size: 12px;
! |, b0 c# {' C* z' P: s6 i! \( Z
text-align: center;
8 `+ [3 t( G' l4 q! [
margin: 0px;
9 `* Z) @( D: i* k
padding: 0px;
! q& i+ I) S1 p
}
" H4 m( F. m- }2 t+ i' i0 I
#pic{
) @3 g6 t1 D7 N/ h m
margin:0 auto;
0 P y4 C- Q/ o R' F
width:800px;
$ t7 E0 C6 B. S- d; }( v# z" O! A
padding:0;
, D' K$ j: q7 P# s
border:1px solid #333;
/ p2 i v3 a, q/ c ~
}
3 t+ @; g" Q" a
#pic img{
: k# k7 b+ g1 K+ t9 q; d
max-width:780px;
; @, ]5 g3 _ c. ?
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
3 U8 _: |! L# z* X. s5 g1 W4 o
border:1px dashed #000;
) d/ m Z/ D. V9 g' A) l7 I
}
* T4 i0 x# X. G6 t' |/ V0 c/ N
-->
7 }# g6 }5 z2 B+ a0 T
</style>
# S/ H$ H1 J8 ]) ?; `8 Y2 v: |
</head>
! A6 }6 w& A- ~ t- g' {, C
<body>
7 I* s6 T# G# v6 U) |
<div id="pic">
/ ]# Z _+ a, x* ^
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
- Y. N" ~( W0 z$ S c" y$ `
</div>
& `3 b- k8 h2 A6 R% @) E
</body>
; T5 j) M6 A/ p% D- V2 M
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
