标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
9 D+ _7 y! K9 O3 i3 ` g" b
关键在于：max-width:780px;以及下面那行。
7 a! m5 ]4 ]; p0 ^; \5 c: l3 ~1 y
固定像素适应:
9 l4 j9 _+ S( G/ n! {; z
7 \& v- E W6 F# j/ ^
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> 以下是引用片段：
1 z6 B" I0 u. D4 f r
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( \3 S8 y5 _- P; m( `# l0 J3 g
<html xmlns="http://www.w3.org/1999/xhtml";>
8 S5 d$ K( M/ b9 u" L9 q& R% H+ l
<head>
' F5 R: l4 w" `9 T* F4 G
<meta http-equiv="Content-Type" c />
( a2 Q1 H8 p' @3 L3 |8 u; V
<title>css2.0 VS ie</title>
- P% a8 T( x# q; q- Y! P0 G
<style type="text/css">
6 T5 {4 ?8 C+ G1 t) O5 p
<!--
; H. X4 _& C$ F/ k
body {
$ w# b6 Y( s, t, T1 Q, _
font-size: 12px;
+ S+ p2 p1 ]: M) ^ z; p: F
text-align: center;
" k2 E1 w* X- d3 I( i. H
margin: 0px;
# A) K* H! W/ j3 ~$ V
padding: 0px;
+ C7 c) [3 @" {9 I% u% L: M* G
}
% V! \0 C P; t$ s% ~, C
#pic{
1 I$ g' p: [8 [! E6 w
margin:0 auto;
3 A/ K" N2 s2 M ?$ i
width:800px;
( g# q* a4 Z& K
padding:0;
( _0 V* _; d/ Z$ v! C2 g8 J4 u v
border:1px solid #333;
! l5 d, Z! y5 G" I1 @' x
}
3 L; k! {+ p2 N" a& [" v% D4 F4 e
#pic img{
2 j! [0 l7 i- Q3 z. K8 \
max-width:780px;
0 J' }5 J6 f6 Q7 r4 {+ o5 t. v0 c# Q5 F
width:expression(document.body.clientWidth > 780? "780px": "auto" );
0 A6 {, n- T$ e- m2 B- R% t% y
border:1px dashed #000;
5 k& @4 a7 ^2 c) ^$ B% R
}
, {2 n9 F0 ]$ {$ T& t V
-->
0 |. n6 b- F2 z' V3 s! u7 L, F
</style>
. N' D! w+ H I" o' L5 d
</head>
; s2 ~' P" L2 `: F3 a! J, J
<body>
" }5 g1 p W3 n N3 l* n
<div id="pic">
9 \% |4 G i9 {. g
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 F8 x: i+ D% _; ?
</div>
5 A$ i3 x% S [" [1 b
</body>
+ X3 e, h6 b8 e: Z% m
</html>
" a/ D! [% \( t2 U& B Y8 l/ |
8 J! Z7 b4 f3 [
百分比适应:
* b. \7 V$ j4 S
以下是引用片段：
' j. s, z# p+ m$ H7 ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! h0 I/ q7 t; [+ P
<html xmlns="http://www.w3.org/1999/xhtml";>
6 d( }" i+ y) T, A Z
<head>
/ q5 l( h4 D, w. b. o* H: @
<meta http-equiv="Content-Type" c />
+ E+ T8 R5 B1 i- `1 Z& X
<title>css2.0 VS ie</title>
- g- K1 L9 ^9 l
<style type="text/css">
- U5 ^" z% v3 A2 {$ P, D
<!--
, |1 ~, t7 G- w0 m
body {
& U+ U0 v* H Q
font-size: 12px;
, w1 X/ h [8 F0 |
text-align: center;
2 Z w1 D+ _) S. F2 Y
margin: 0px;
7 B( T5 E/ L: \7 F# l( i" z6 Q" C* @
padding: 0px;
5 ]( b& q. N3 ?% W0 H
}
( a! ^/ ?8 i9 [& O9 k" Z. h
#pic{
2 Z$ b. F, L0 `0 w* R$ c% B
margin:0 auto;
" k; R/ A3 t* a0 Q, a
width:800px;
7 {6 M1 L1 b) s& [- r. i9 n
padding:0;
8 T/ m- D6 F: V$ C }
border:1px solid #333;
7 ?/ f4 g3 a9 T3 h- J4 H
}
1 l5 w4 f$ h( V
#pic img{
6 ]7 P9 `- v1 m: x" ?: `5 A1 R
max-width:780px;
X3 B) B0 T+ P
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
/ a% o6 t+ S2 r9 u, |% _
border:1px dashed #000;
& x7 A2 K6 g$ J' _) N
}
+ ?; a" d( y: p+ Q6 X3 W$ q
-->
8 {# l) } S" D$ ?1 C% H- R
</style>
4 w" ~0 Z+ Y0 t& T' I2 v% h+ m
</head>
+ j8 u: Y$ g" V( B$ I- [$ y. A1 b9 f
<body>
9 W0 g7 u- Z: O5 ^; E% y+ h$ P
<div id="pic">
8 P- l' {9 F" e0 j
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
/ E$ X3 |2 F9 u/ K! P
</div>
7 g& ?# R5 V' u! x/ V _: G: m
</body>
( `& u o/ s; \' d6 E
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
