标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
* T( r! \1 z; G& g7 i* v. E) d
关键在于：max-width:780px;以及下面那行。
4 W) c5 h' o( i5 [+ m0 ^& E
固定像素适应:
+ I( w. k: N; l
; c$ t) d3 I x5 a
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> 以下是引用片段：
" V! c$ M6 p: \% L) B9 N3 w3 p
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. O+ L% ~- X' a5 o8 `( m" Z
<html xmlns="http://www.w3.org/1999/xhtml";>
5 I' u* w6 k- F- c3 C/ f* i& D& a! J
<head>
* R9 B9 c: `/ M$ d% _. u$ r! V9 y- g
<meta http-equiv="Content-Type" c />
8 p& ~, X2 w$ U; F/ j" q/ \) ^
<title>css2.0 VS ie</title>
+ e8 K6 k( `, S' t$ [
<style type="text/css">
8 g% P" A/ W% Q
<!--
+ ?7 N, ]2 l: v0 Q/ M _- F* F8 u, X
body {
# Y7 ] |9 ~6 x
font-size: 12px;
; U4 ]. F7 W$ Y* {
text-align: center;
3 ]0 Q9 s+ Z; q/ I
margin: 0px;
5 @9 c( `8 t/ v. V: G1 q
padding: 0px;
2 A7 S9 {" _# z- W
}
7 c' {" D; e& x) c& o8 `0 K7 A
#pic{
7 v! v7 t3 X, c) a% r! X
margin:0 auto;
3 @5 H _$ H; c7 `) u) Z8 J, Z5 N
width:800px;
( s8 ~; ^9 A2 i# a0 C m
padding:0;
0 N6 S6 s7 K( E! e6 A
border:1px solid #333;
4 D. r* {0 {4 o2 {% }( n5 y: F3 Z
}
7 }4 J8 p6 B! P- X4 {6 H8 S0 F
#pic img{
" e0 E8 X7 C+ n$ }: T
max-width:780px;
6 \! u: M' z4 G4 s! p0 B2 U0 v
width:expression(document.body.clientWidth > 780? "780px": "auto" );
6 z8 T- \( h. F; T$ y
border:1px dashed #000;
1 w- [" y: g& e
}
% @" i9 r4 [ t8 c7 ^; R! x
-->
4 Y* S6 G. D6 n% w
</style>
' R6 w8 g1 Y" P% g8 F% P
</head>
+ ^- I5 X5 X$ V) f
<body>
3 V' |9 ]5 f* U) w5 ?
<div id="pic">
# I4 m* t* d2 e0 W
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
! d, f! ?/ w j- ]/ m
</div>
9 v6 D* J3 _, f: M1 U- H( Y. e
</body>
# `$ d; w/ f7 `! o2 o
</html>
D9 D! i' t3 m* ]9 _ p
~6 I+ Q) M2 G( ^
百分比适应:
" t( F. c( q" d C# n) R& O
以下是引用片段：
- h% q) i. i# T- b
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ d7 y' `& x: F! P) Y6 u! L
<html xmlns="http://www.w3.org/1999/xhtml";>
, L: _4 }& r3 t; W
<head>
4 c1 o! G0 o4 C( ^ X" F, K" o4 f# v
<meta http-equiv="Content-Type" c />
9 v3 p! i3 I+ o1 [8 t
<title>css2.0 VS ie</title>
% { L4 a9 K; c5 B" N( ^
<style type="text/css">
c' ^2 h: k' d% u) m8 T. d
<!--
3 N, h( @/ h5 O: @5 x; p4 b: k
body {
$ E+ o0 v/ B: l
font-size: 12px;
* x8 p( a6 m, }7 g8 V {0 r
text-align: center;
9 }2 Z k* f1 p5 F7 y- J
margin: 0px;
% ]+ y) ~: W3 O1 f3 i4 T: Q6 v
padding: 0px;
0 o. e& i7 o% L, c" `# `
}
, k+ S( V. E2 {/ k
#pic{
?5 l. ^, t9 D: K
margin:0 auto;
* I) D; e& }( J8 u
width:800px;
+ A9 T1 Q0 j/ d& f" Z+ W
padding:0;
" l, E3 b& O' h8 i; T R* l( ^
border:1px solid #333;
2 v5 N6 O3 L! h% X* k8 D& W
}
' D" p7 B3 d1 |& d5 b
#pic img{
2 `4 F+ D' W, s2 i2 t( q
max-width:780px;
0 {- t' o- I7 R% @
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
2 `2 ^5 s$ ?, \* {3 x- {
border:1px dashed #000;
9 ?% g7 c6 ?- f$ }; G& |' V
}
: T, g6 Z- T: p* v. k+ D
-->
: t5 g w/ c! R4 W( ]
</style>
, b5 J8 b) k! z. c
</head>
2 |/ U7 {8 Y. U3 P: y9 ?5 X8 z
<body>
4 B4 A) `) @: E6 i% a: S5 S
<div id="pic">
2 z9 N5 }# @) V1 C, c
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
6 D; o+ i4 w0 ^& R$ s
</div>
1 b5 m: u+ G( C2 i# s. D$ H9 o( D
</body>
: [+ L5 W4 I; u# ]: F6 b
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
