标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
8 o& S/ d: P8 z
关键在于：max-width:780px;以及下面那行。
! _- `2 G9 ~, I" X3 r* r
固定像素适应:
?% m* j: x2 p1 ]8 O0 l5 ] @' O
" a$ C2 ?9 y# B7 P( H( y
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> 以下是引用片段：
' _$ U$ V, R: o& U3 p# Z8 h
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ W5 A, R6 M+ Q L( h7 o& [
<html xmlns="http://www.w3.org/1999/xhtml";>
2 M) b) T, G* ?# P ^6 n( j
<head>
* x4 |6 X. C5 u1 Q, A) N+ p9 \( _
<meta http-equiv="Content-Type" c />
8 ~" H: I7 h( Q' i- ]
<title>css2.0 VS ie</title>
: y" d/ N1 L+ D, T& c
<style type="text/css">
1 ~ m2 Y {8 D$ L" s2 d
<!--
! V- `& a2 z8 U" I; o* A* k0 X
body {
' w7 |5 z4 u* b& [9 u8 b3 Y/ O; L9 {
font-size: 12px;
! ~. E6 ]$ k; S/ W3 j
text-align: center;
+ O4 n* c5 K! d! Y+ I. t
margin: 0px;
1 u6 c. k6 _* T4 z) j& r$ q% A; R
padding: 0px;
0 i$ n5 p+ t, y! e! I' _. M
}
2 X* ^% o1 H, _6 Y% e/ ?8 D
#pic{
0 [2 d1 Y) g9 u, P/ A2 g+ I; |- |
margin:0 auto;
* r0 ?# I' A$ N1 ~2 h5 U4 Y& o- x
width:800px;
/ m/ q I, C0 O7 D9 c- l
padding:0;
9 O% l; q: Q. T
border:1px solid #333;
3 i' D. F: l7 C- L4 t! A1 W
}
1 B# E! a! z( p( F) k8 G# s
#pic img{
1 W& y/ B4 P; s6 D$ S2 S. Y
max-width:780px;
/ I6 j- a/ i9 N% q% r
width:expression(document.body.clientWidth > 780? "780px": "auto" );
# r$ ~/ x0 H0 ]7 f4 @
border:1px dashed #000;
6 q; Z( j2 O. [1 _# Y* s! c' Y3 Y% c
}
2 I" o4 ]8 h4 X! j/ A- g+ g7 i
-->
! t' Y- a! o: p
</style>
0 w, P1 a1 g6 X: i+ f7 r, `
</head>
' R N( J6 |: d1 |/ o
<body>
" }7 p3 N5 t' q1 g/ x9 e' U
<div id="pic">
* f( o3 p$ i# j* Z
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
9 Y$ {- H+ W/ C! ]3 g$ [% W) h5 k
</div>
( o2 M% ~- r6 F0 q' f
</body>
! c. g& }& C# Z6 d& d
</html>
2 R: y8 z, e& \+ ~+ j2 ^
' R, u; s$ L: ?# k( I L
百分比适应:
+ y ^, V) }" [
以下是引用片段：
8 Q) h- s4 D6 S3 \3 Z: _. k. \2 [3 i
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 v% \5 i0 D( o0 F0 }" F+ h
<html xmlns="http://www.w3.org/1999/xhtml";>
. b9 I( x5 N+ |( \; @
<head>
2 f! k' ]% V+ ]# N; C% `
<meta http-equiv="Content-Type" c />
# Q; L, ^4 B) r1 {) ]; ?. m
<title>css2.0 VS ie</title>
( U4 W& G/ C1 Z% W, _, p
<style type="text/css">
* L5 D# s9 y* N, g2 g
<!--
% L0 L0 A9 _" D" X. Y% S+ o( Q
body {
7 N2 T! @0 Q Y' B3 |
font-size: 12px;
( ~6 N9 c* l6 A O) |" y
text-align: center;
% z. ]' E; k5 o# b6 C! m
margin: 0px;
& W' Y8 v- p5 s' z3 N- K
padding: 0px;
" ~* v% e0 _1 V
}
7 C y3 j) E2 @5 \
#pic{
0 L D/ }8 c/ K
margin:0 auto;
2 }, V# w5 s# E
width:800px;
; `, g3 G" U8 o. ?5 ^0 U
padding:0;
' v7 M; R+ z: Y2 U% Z
border:1px solid #333;
# f2 O. U/ k' S. j5 {- A
}
) B& }$ m1 ~. h" `
#pic img{
: J& @# D% v. o3 J5 U3 T, L/ \" Q
max-width:780px;
0 h6 k3 L1 s+ {5 o
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
! j: u$ Y z! ?3 o: N* Y- L
border:1px dashed #000;
% x4 v* J/ o; m
}
+ r7 e# `1 V7 P+ U
-->
2 @8 Z$ Q8 ?7 F4 w- I3 T
</style>
) `0 N7 R/ ]# p2 V9 ~$ T
</head>
c/ W2 q6 o% k/ a
<body>
: q. @/ C: B `& }% ~
<div id="pic">
! m x2 r4 b( m! j) l
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
4 u2 h& T5 m) P2 l# F
</div>
- E" S: {0 P+ D& N8 K6 `
</body>
. y1 k# u( |# o {; J( F0 W6 x
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
