标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
9 ~& J- v q6 ?, A1 t+ Q( M1 y4 q
关键在于：max-width:780px;以及下面那行。
. F: S0 P4 L4 @2 J* n
固定像素适应:
! y! m. @$ H; c
4 p/ ~4 ?: O4 W2 z
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> 以下是引用片段：
7 a% v6 `3 U5 O2 P* Q6 j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 h: S1 c: P( s, x- E- t% A3 Z
<html xmlns="http://www.w3.org/1999/xhtml";>
+ f% }2 R* _, @. ~' _1 \
<head>
0 {8 L* ~& I- w# u! G
<meta http-equiv="Content-Type" c />
& u1 W- w w q8 ]0 b
<title>css2.0 VS ie</title>
/ p( T$ ^. @. W. f7 y* Q
<style type="text/css">
" `6 Q( S2 d0 t, y% V
<!--
: j1 |7 ?0 r- \" [
body {
- r# H* u6 M& Z9 g1 }, p
font-size: 12px;
/ C/ ~% U! c8 [1 W5 w& [5 M' A
text-align: center;
7 Q, D0 w& C& {
margin: 0px;
% B8 M6 ~% P. P3 d/ k
padding: 0px;
. \8 I, U. z g! C* \1 _* j9 m/ I
}
9 S" I$ c! X) Z- E" u, U; t) s
#pic{
1 g% K4 r2 m1 o' E! k# P- W. T
margin:0 auto;
3 [, k& o% k0 l' B" c
width:800px;
0 _2 p6 C6 V! v' d4 n" m6 l5 u! E
padding:0;
% [/ u0 Z2 e- M7 g, S
border:1px solid #333;
M& p; k7 C! {) D0 p9 w
}
* Q1 L0 t3 u k/ D( u6 e
#pic img{
; @. @" ]$ e0 h8 b) @3 ~
max-width:780px;
& h& N8 Y* {; Z% u8 A
width:expression(document.body.clientWidth > 780? "780px": "auto" );
$ T) d# p% D w; f' ^/ ~
border:1px dashed #000;
, U: ^3 ~4 m% E$ P @( \. |
}
6 i# I# d, T% d; [5 I
-->
$ r1 ?/ C2 c0 Q" y3 L# I
</style>
7 p0 }5 l% q2 v; Z0 D5 Y
</head>
! m) q8 P+ ^' E! @+ X: y0 p5 x
<body>
( l* a I* E+ n5 h2 t% W I
<div id="pic">
$ t( f3 Q: Z, a. @5 S
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
' l$ k1 W' N# o/ z& }4 B1 S
</div>
( r- A6 d: D+ I7 H! w0 @* v, |% w
</body>
& I+ y- }' `4 r7 B
</html>
- s2 C" H# D/ {: Y$ D! V
/ q5 _% n( R: _4 c
百分比适应:
" j" V7 E- N. p* W3 L l
以下是引用片段：
; X: i8 ]" C4 t
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: r$ [: H6 @5 V0 P P: s! E
<html xmlns="http://www.w3.org/1999/xhtml";>
0 W$ O3 [) I+ K% I7 w
<head>
3 g3 p- ?8 G4 M, D
<meta http-equiv="Content-Type" c />
; D" ~7 G t0 w
<title>css2.0 VS ie</title>
" Z% A7 K& A% X4 }5 t
<style type="text/css">
4 h! } X; t p- s: K. V# M
<!--
/ Y1 \6 f5 K0 q% ]
body {
9 \- e$ W0 D3 c" O/ N
font-size: 12px;
- Z4 y& S2 B1 b* \" N: F4 G
text-align: center;
/ E8 P: A/ B) B: o0 f
margin: 0px;
( ?$ r% U& a' E( B
padding: 0px;
T' x! k! q) F2 y
}
# G+ ?6 |2 Y5 w" F
#pic{
# j3 h& D; ~( x0 |+ }, C
margin:0 auto;
" d# m: U$ J2 O0 h* Q" W: Z
width:800px;
* _& l0 {3 a" S4 G6 x/ K0 w8 R
padding:0;
* D3 z! m9 r: p- s Q, D
border:1px solid #333;
" C" h6 ]6 y0 X3 S" E# m
}
+ t" \. I/ w# O m+ v2 f8 b& P
#pic img{
; }3 m0 G/ T2 ]1 c$ x8 W# _+ N: g' x
max-width:780px;
4 G8 i' f4 i6 q3 H( m
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, j& @% s9 r% {9 x( O
border:1px dashed #000;
/ _+ I+ a5 B8 b( s/ B0 e/ h% S; k
}
: r" t) z1 ~# ~2 G: z
-->
( j- L6 W1 b+ l( `5 h' h
</style>
0 e! \! J0 Y2 L" E/ _
</head>
# k6 S! I" a {* w8 O
<body>
* p7 S. V R& b: w; p) r9 N, H
<div id="pic">
1 V& P! T. N% q
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
H9 E+ Y2 j) m+ _$ A& e# G4 G' u. p
</div>
; Q/ Q; b% C9 v8 Z2 T6 r5 U
</body>
; {# ^, o- I- \; X# `) C
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
