标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
3 I! Y8 {* U6 H2 w# v
关键在于：max-width:780px;以及下面那行。
9 a0 D" ?! z9 [7 e7 |, O" V' t$ W
固定像素适应:
* O6 B+ ]3 S/ G3 y7 F
- g1 R4 M4 f) `
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* c ]' q% p2 _
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ Z! U1 D/ o/ Z; k: I
<html xmlns="http://www.w3.org/1999/xhtml";>
7 U6 o5 g2 ^$ k3 P# \) N
<head>
; X0 W2 A: a" P0 n
<meta http-equiv="Content-Type" c />
/ z7 {; |! ~- j" D1 a5 P' C9 _0 U
<title>css2.0 VS ie</title>
' @! U! U) V. n& E
<style type="text/css">
0 G8 Z8 G+ S& m' p
<!--
5 D, e5 _( R# b2 E' h9 D
body {
# B |# g1 k' e$ N
font-size: 12px;
5 u% t+ K3 c& T) Y6 B0 {/ v. J: ~
text-align: center;
; [: f8 G) S/ M( N. x- K: S" W2 ?
margin: 0px;
1 E. m2 v$ O" @
padding: 0px;
1 |3 m0 V/ J& }' t: @ z
}
6 @+ Z) Q: z. q7 z1 I( L, s% f
#pic{
( V. L' V. d: s. m
margin:0 auto;
: B1 h8 r% T. u- m4 g
width:800px;
( W4 Z6 ^4 O4 b) b' {4 R u( x
padding:0;
7 t; F. Y, y" T$ z
border:1px solid #333;
5 \7 J% [* g% T4 D9 ^: l* G
}
8 P, E8 |; g7 ^: t
#pic img{
& v( ]7 @. W, L" Z3 V
max-width:780px;
) n4 `8 o5 o! p
width:expression(document.body.clientWidth > 780? "780px": "auto" );
4 T0 k2 c* ~7 l& m- ]- f+ K( X1 q
border:1px dashed #000;
0 t& p! C5 }! P, S1 X4 q: O3 D
}
! M- E& j( G+ V7 ]# Y4 J, O+ N6 ~
-->
& R" F- L8 o9 o& Y
</style>
0 c6 n2 F, r- I* q" W
</head>
( [5 I1 P- l$ ]! A
<body>
1 l( l* Z6 y { Y. v1 R
<div id="pic">
- [& l; }% b& Q4 Y8 g% X4 g
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
8 J0 c1 T4 p5 ]# Y \" I$ L, @
</div>
: d" [6 F7 a! e8 G- n- h. C |
</body>
# f! E) s) M4 |* U
</html>
$ y# i8 s" N2 Z$ e$ Y
) j% Z8 f) c( Y6 k: r! X
百分比适应:
: y7 \( F; L2 K
以下是引用片段：
8 F# v5 Q1 K( }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 i. [: J% {' M3 d. G$ L# M
<html xmlns="http://www.w3.org/1999/xhtml";>
, |# S7 z: o& G' Z# x! E
<head>
/ p! {) i( U, O: o- o7 r5 O; m- N, {2 `
<meta http-equiv="Content-Type" c />
3 R% K! b3 r% o) f
<title>css2.0 VS ie</title>
4 s+ D6 v& Q( J* _1 t) y q
<style type="text/css">
% b) h3 P9 ?( r: }; L
<!--
; n3 p/ m! {5 a6 T( m/ F
body {
# w( G2 T. B! }; m. S
font-size: 12px;
) g$ q7 G+ } E( m+ K( g" u b
text-align: center;
: a0 H5 G1 }$ W: z, y0 g
margin: 0px;
; {- A4 k% \* p# W
padding: 0px;
: K$ v! b5 Z* C0 x( J) R
}
5 v9 F M) d0 l5 T/ e0 _ S$ T
#pic{
9 R) d: c! Y7 s6 s K
margin:0 auto;
: \" K. p6 ]# A
width:800px;
0 h% a' g# K- ~+ _ f# z/ Q- h
padding:0;
V, y2 A+ N$ R$ v. {# s* F/ z
border:1px solid #333;
; s- ~; f/ l0 D% o8 c2 n, K
}
- s: Q* f. F# x0 O- o; c
#pic img{
2 ?4 l- e) b, d9 c1 [5 `* q
max-width:780px;
+ T% D( C3 A9 G6 o/ e7 m
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
( H# ]' u, r9 }* L% w- A
border:1px dashed #000;
1 @$ B# D4 f$ I, v* ^" X. t6 X* v( J
}
1 l7 {$ L7 Z. _; y" E3 D7 G
-->
7 U# d3 Y8 D# F9 O3 `$ V
</style>
* ^% ]6 u& m! S
</head>
' V- _! G& C; k* v8 u
<body>
K0 _) A8 u! _$ [: ^0 c& V* Z9 X
<div id="pic">
, Z: r8 \5 J( s: T+ ~) c3 P
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
( u6 h: M: b% P8 }& G
</div>
+ d3 d5 F& W" @( U& F$ E; _4 [3 n
</body>
3 t4 h% p- |0 t0 m, |, v
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
