标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
8 z0 U3 F4 P9 e9 R; b$ H9 M0 W& [# V7 D
关键在于：max-width:780px;以及下面那行。
( {/ ~3 }* f* j, i$ K
固定像素适应:
! t9 @8 O2 v* G4 L
: ^6 a8 K1 s1 I. O! p! F# d- ~
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> 以下是引用片段：
: i+ }2 f( y3 }- _
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 Y$ k1 F) q8 Y/ S
<html xmlns="http://www.w3.org/1999/xhtml";>
/ \3 B6 ], g1 F
<head>
" x+ T* u8 n* r2 e
<meta http-equiv="Content-Type" c />
/ |) T1 o7 d& U0 }5 u* ]8 J
<title>css2.0 VS ie</title>
1 I' E: i5 T) v% b0 `8 k) v( Z
<style type="text/css">
+ D+ C$ [3 ?. V- p. X0 i3 _% m
<!--
9 |- V" Q4 k$ A
body {
; n% g3 q) B" Z. D
font-size: 12px;
e* z C9 }; F
text-align: center;
9 u! c3 W/ R4 ~9 g7 y
margin: 0px;
A+ `1 l# W$ s3 ?
padding: 0px;
3 @% n) B% V; D& P: S( j1 k* E
}
% r( X' ?& m8 c9 J C
#pic{
% V0 `4 h9 F& y% y- p* C& K
margin:0 auto;
5 E& M. k9 i6 D# C+ C/ p
width:800px;
4 C) d; I+ ]$ Y9 o7 |. }# p4 {& c- t
padding:0;
7 Z$ i) o# {0 R2 r$ M! _
border:1px solid #333;
* h7 [! v: I- V% h( r4 d
}
9 A0 H. X7 h, q
#pic img{
, y3 A. ~& n$ V% s3 Y4 D
max-width:780px;
8 a: i) H5 V% {
width:expression(document.body.clientWidth > 780? "780px": "auto" );
6 `0 f5 O3 A9 A0 @
border:1px dashed #000;
7 ?3 a) e/ F# A$ }1 G
}
# P1 t; z5 g, l5 K0 V9 ?0 I% r$ t* ~
-->
, U: c6 P% x* V+ X" A c
</style>
$ s3 ^# _8 V7 q" I$ q
</head>
- x) ]2 {' Z1 \" [% }
<body>
1 N% w% {3 h' J5 D" y: f4 ~
<div id="pic">
% ]& z6 I- `) q8 ^6 i' ~" U
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
. Z. A: h* f/ c9 H* L" I0 Q* f
</div>
0 i. p: T1 b* K8 u# [) n$ X
</body>
" E: z/ i. I0 T8 W1 M; s
</html>
" z2 s* }- {3 W" x! C% M4 L8 q# Z
% `1 W+ v% o2 C6 @
百分比适应:
4 z) e7 @( r8 m1 Q. ?6 [2 n- K
以下是引用片段：
! h$ M9 J2 j; w% T8 }% [& m
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 n) n7 Z$ }( i
<html xmlns="http://www.w3.org/1999/xhtml";>
/ B5 g: z0 W, p5 y
<head>
8 ~2 b- N( j4 p% s3 _2 T
<meta http-equiv="Content-Type" c />
+ s, u6 {0 Q* E5 l5 ]
<title>css2.0 VS ie</title>
2 w9 }+ N7 E* l3 [
<style type="text/css">
- `: c4 z9 u% R, {
<!--
) O! E5 }, Y' C/ B% Z
body {
" p! J% R- [# Z6 c# ]6 }
font-size: 12px;
) Z# x% w7 p: }1 k% G/ F
text-align: center;
& F9 ?/ E4 }, s+ f- m, a0 g
margin: 0px;
! U8 g! S& n. h# a7 u0 K3 \$ C
padding: 0px;
7 m- x( U3 d9 J& O" {
}
8 P2 I0 c) K% _8 a& q, U
#pic{
" I$ d1 G/ S% i0 J& |
margin:0 auto;
! f1 e$ o, [, g/ d' C" V9 T2 b! F
width:800px;
& O3 E- _ G$ m
padding:0;
& ^# p7 I& @3 F2 n& U# S% ^
border:1px solid #333;
, l. Z- E3 w% ?3 C( r7 {1 {9 N
}
1 H1 E! Q% w7 ?: p- ?6 L3 o( o
#pic img{
& |7 u& e2 A) u' I3 P! J G' |, b2 {
max-width:780px;
4 C/ x2 Z, l5 B$ D
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
2 s4 L, U3 R) b* E( [' G2 n
border:1px dashed #000;
6 k, f) f O; ~( o, c! a8 b
}
( W: I/ v1 {% o$ {
-->
7 x6 w$ F7 z4 e' ` x2 y$ a; ~+ \# T
</style>
1 j3 u* i) |* r0 _" T6 y
</head>
, X1 Z" y0 I/ q9 \ ?" b
<body>
& Z- }- p& p8 M# v+ z: l
<div id="pic">
) o0 D7 L' g0 [8 [+ w- @' ^6 V5 m
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
) F: H' D3 a0 h+ h
</div>
4 ^. ~* l: P) m& R& |- x- [
</body>
$ Y! u0 N2 h& ]5 j+ X. X+ S" O
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
