标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
3 v1 Q; p9 G' T$ c& X
关键在于：max-width:780px;以及下面那行。
+ E% A9 M! x' q& I: [+ `! ^
固定像素适应:
. d8 |7 i' v% E
2 S% l2 b. N# `% o! i& s$ 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> 以下是引用片段：
3 v+ Z+ X5 ^6 _* Y% l
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 X& p# r; ^7 H; D* ?; c
<html xmlns="http://www.w3.org/1999/xhtml";>
/ m; R8 E8 |! T( O. I5 R# y
<head>
, ]* T/ J" _6 L( q0 i5 ^
<meta http-equiv="Content-Type" c />
6 \0 h6 F) n( a5 m6 a2 G) y, \7 b
<title>css2.0 VS ie</title>
3 z* k9 u+ G; M0 h! v
<style type="text/css">
* i( N% N4 \& B- h/ r* G2 j/ y
<!--
% ?' ^" Q4 ?1 J" K& ~) E a# w$ h
body {
1 ~/ |1 d! G) R
font-size: 12px;
+ S+ B; l3 Q2 N" b4 U
text-align: center;
% h' P# N/ x7 m& c' N
margin: 0px;
; K9 F, ~* R% D# h- u
padding: 0px;
2 D: H" N8 P7 h" m
}
( H6 x( N" t. ~2 W
#pic{
. s# y) B, b% K' c
margin:0 auto;
+ {& o. M1 ^7 h8 K& H
width:800px;
: ~ E2 Z' j$ w* [ y# H
padding:0;
/ S1 W- M5 p; A; u6 } C W" z
border:1px solid #333;
. S' j3 N3 q1 e" X2 g9 \
}
& y( F# l# e6 y; s2 _
#pic img{
- O; p8 v6 G4 q* W H$ N
max-width:780px;
/ B! ^" w$ b- v) A" u9 x
width:expression(document.body.clientWidth > 780? "780px": "auto" );
2 L6 e! p, w1 U
border:1px dashed #000;
2 f t8 ]0 a5 \9 ^1 E0 K
}
) m8 a0 b0 a; x" K4 c
-->
9 o8 I9 A: v' @5 P* P" @: g; l
</style>
# W( w9 W* j1 i
</head>
& |3 J3 s# d0 t, Y, z1 g' e. [
<body>
0 G: J8 c. E5 |
<div id="pic">
" e' O R! J$ ~+ \* d" C% f
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
, F8 h' y& F- w# x9 n* c6 x' j
</div>
$ C1 s3 _* X" `3 C- ~. X7 l* Z
</body>
& l& n$ \& e) N" k% V# {- Y
</html>
( `' [& \/ j# z2 M) n% E+ O
- f' B* `! c+ t: A
百分比适应:
4 s. E0 F# F8 `: F
以下是引用片段：
* ?% v9 H8 g" e1 O& Z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
7 u1 s: l5 o6 Y6 S# @- s& b
<html xmlns="http://www.w3.org/1999/xhtml";>
% G- T0 _( j$ f5 W$ B
<head>
8 ]: i" D. t, c" r
<meta http-equiv="Content-Type" c />
4 t# C# h N0 l+ C7 c% W1 t
<title>css2.0 VS ie</title>
& H; E% B" g& B2 E
<style type="text/css">
8 H' e& W. @% s% ^+ @$ f
<!--
" Q: a2 i9 q' h! h$ s( K
body {
j/ g7 S% h* Q$ Q& m# \
font-size: 12px;
v4 A8 I4 S+ Z: F6 d! Y7 ^
text-align: center;
8 v0 N1 _" A8 |1 }( A8 O9 i0 @
margin: 0px;
. K( ~) {7 Z# P
padding: 0px;
. R0 T l0 N" ^& _2 G3 H( L0 q! ^1 L
}
$ M! E& G' O5 J( G6 g) i
#pic{
1 C* Q: R0 U8 s' O$ v0 I9 P' B% K
margin:0 auto;
& }, u A, Z) t
width:800px;
* s$ |8 |& X; Z
padding:0;
8 J2 V, q, l9 L1 X
border:1px solid #333;
/ r$ G) z+ y g9 O- `
}
& }9 K. n- ?7 ^! Y Q
#pic img{
% M3 f5 Y; p& Z* ~
max-width:780px;
r3 w( F! G0 ~
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
( v D; n& c- P' u
border:1px dashed #000;
. `9 s( X' B7 f* s
}
& z' f* e' B1 Y5 r
-->
W8 x7 O J$ X) Q* ]$ M* K* ]
</style>
W" H) H4 i' Q$ R& [2 U
</head>
$ v& ^) w8 X, o1 @8 L
<body>
7 S% s. B( P7 L3 L
<div id="pic">
$ T) |3 |" h) R* v
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
; q: J( Q' ~8 S K) n
</div>
" [2 E1 i' [3 A/ y) J
</body>
% u! B( t# I- a6 e# x% ?) B5 t* g6 D
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
