标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 a' F% k7 s8 q0 c
关键在于：max-width:780px;以及下面那行。
+ ]5 u, _* y: q+ Z
固定像素适应:
/ {: B% K( }8 _$ L" S
2 ?, S; P, p3 ?2 u& 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> 以下是引用片段：
) }: z0 W2 E1 @' Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% Y6 I; Q- [- d/ w
<html xmlns="http://www.w3.org/1999/xhtml";>
' v Q- F; t: z, n0 b! @/ [* d7 f
<head>
: q! m6 N" {+ T
<meta http-equiv="Content-Type" c />
9 [1 \/ _/ _$ [! w
<title>css2.0 VS ie</title>
0 m3 @& g4 m4 {7 N: S
<style type="text/css">
- b. G |. ^3 P. p- H. z, Q$ \( n$ @
<!--
/ l! W2 R- q6 S- I: M
body {
2 {) Y0 N4 H* v3 u0 C
font-size: 12px;
5 H7 Q! k1 G( W. U# O
text-align: center;
5 B6 a% n: U& r, ?
margin: 0px;
* T4 b+ U% b5 K; R8 \
padding: 0px;
$ d+ }0 U' e" }2 `
}
2 K! K, |6 w* F5 F; i# {1 V
#pic{
% n# ]0 q: k3 L8 I% b' ~; o
margin:0 auto;
# u" t9 @* z. k3 a
width:800px;
0 D: E A: A" h, I6 u) D) R
padding:0;
9 Z0 H& }# ^6 r6 i2 d! r
border:1px solid #333;
5 D, c7 Q& C, K) N
}
5 \ P, r: d2 O2 y
#pic img{
9 @5 e5 W0 c# [1 g( S
max-width:780px;
8 C r! P. _0 [ ~. a% H2 c
width:expression(document.body.clientWidth > 780? "780px": "auto" );
w; y% i* X; ?' D- `+ y
border:1px dashed #000;
+ |, m _2 R$ f0 a7 m9 `, W3 p
}
' a' G8 E0 Z8 @* ~: ^' }" N
-->
' y5 ]0 Q* N+ ^/ N5 B
</style>
! \. g0 i! X( e) l
</head>
6 {6 q3 o$ t5 k% C) T
<body>
! ]+ N* F* }% Q1 o ^, c. B; {
<div id="pic">
! z+ V% o1 G6 X v# |
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
+ S$ B$ S5 `$ l6 }+ B1 s
</div>
3 t# g# w2 V5 E0 s$ x$ _
</body>
6 G$ A2 w; G1 I. Q, M, \# {, z
</html>
( @4 r4 X: y7 _
! @& R9 J# r" K6 b9 \. r) E
百分比适应:
* x& q1 V% Z }6 E- g
以下是引用片段：
( @3 F D& m1 _3 A% E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, C) {5 x( ~2 r# z9 }% m
<html xmlns="http://www.w3.org/1999/xhtml";>
- @; d6 m8 C% `% ^9 ]6 ]2 j' @
<head>
/ b) _6 t% L6 j R& ?1 e
<meta http-equiv="Content-Type" c />
9 U$ ?+ C s$ S% R) X4 |
<title>css2.0 VS ie</title>
" X \1 y5 F8 t/ l3 o
<style type="text/css">
( n/ E' x1 I* h4 ^& N3 Q
<!--
9 R" m, n5 D! w
body {
/ s; A4 Y' m/ H( g
font-size: 12px;
9 y6 L8 I! G" @1 U! @* [
text-align: center;
q4 ?4 K' y1 q; G3 X/ M
margin: 0px;
/ y4 G% D# y) @' ?# N
padding: 0px;
2 N* Z1 ?6 S2 o2 d' ^$ v- D, H
}
2 x0 W8 k- u5 y% i
#pic{
6 c9 T1 x8 T- C- [- R7 M+ s8 @5 F' \
margin:0 auto;
3 p+ J, [2 w5 i; N+ q
width:800px;
, f9 Z \5 R4 g& i
padding:0;
5 N! B; J1 b* P1 Z" J/ }
border:1px solid #333;
8 M, S; h) F4 \% q2 U' D& ]3 G1 \
}
. k1 s' J9 E8 r8 z3 c U8 ^: x
#pic img{
3 p, q( ]- H$ M2 O3 j0 |
max-width:780px;
4 e: L$ L- `, }, n7 e* h# B) ?
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, e6 f4 K: q* e( A
border:1px dashed #000;
. b2 b; D# k7 K& `
}
: ~$ \8 \+ w' |: z: z
-->
) X0 u: \; T" S$ \
</style>
2 j" U' A' C; M, w8 q$ t
</head>
& K* f5 T$ r0 X/ C
<body>
F1 M( e( ~. _& p, a1 z
<div id="pic">
" G" z) z; }- @! w* f
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
, h2 _2 e( z; M7 y- c" F
</div>
% `- Q% ]4 l3 h+ {
</body>
2 U% w+ N) z9 ]- g8 @6 i6 Z ^/ x
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
