标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
) b& k0 r- j' ?* ?3 J
关键在于：max-width:780px;以及下面那行。
: u. t j x( T0 M5 }. z( x* _. `" \
固定像素适应:
6 ?0 _' M1 d2 ?9 P7 W y
. k3 r ], q' I2 x
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 i% q# E, [; [/ ] m$ b
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, K1 i$ ^$ d( { R
<html xmlns="http://www.w3.org/1999/xhtml";>
( v7 t$ |" }+ f1 {
<head>
) \, K& h2 B. L8 y0 [ x
<meta http-equiv="Content-Type" c />
4 z# Y: Z* n1 D! m% U0 q6 d
<title>css2.0 VS ie</title>
* `3 \: R! {0 E+ K* e3 N
<style type="text/css">
; o0 ?. \) l0 u/ f
<!--
' U5 l' v& v; z3 c7 K1 a3 a
body {
0 p: j/ P0 C3 C" ^& H" R
font-size: 12px;
* i5 q' H+ b8 \* J
text-align: center;
% Y5 Q6 j9 z' O
margin: 0px;
# z, w3 c3 x5 O* J' _, k
padding: 0px;
4 U9 y8 p5 c. X) Z' U
}
# _$ h$ H" `: V: E# I6 D
#pic{
- C6 M" X0 L" S- z9 x
margin:0 auto;
/ F; m: l1 y7 K" T
width:800px;
7 o2 [& Q% L0 }1 b9 E
padding:0;
2 o; ~* Y& g9 l- y4 |
border:1px solid #333;
2 u- h$ H# \! G
}
8 y, ^" g0 v# K& M% u, N
#pic img{
0 e5 p J& ^$ H# X; Z3 G( r$ X
max-width:780px;
( _; I4 r# E2 I) I+ _
width:expression(document.body.clientWidth > 780? "780px": "auto" );
- J% n% c: r- a
border:1px dashed #000;
6 b4 j k4 |4 S/ T, o# }
}
U x* |' p( j1 s! `. R- `' F1 V
-->
& z; t) _# H( e; l1 u& j6 x
</style>
2 W+ _6 G9 t' ^* P2 K; y$ {. [
</head>
3 F; x% U7 ^6 Y* s
<body>
( ?/ c. A7 u, r8 }* ~! `/ Z' Y
<div id="pic">
& s+ N+ s2 ]; s' D
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
4 f" y! d5 {( Y: ~- {! T
</div>
" L( |% V" O# `/ a; W# G
</body>
- B0 l- Z- l% k7 o- J& W
</html>
/ R: i% s/ C" J! A( I' X0 i3 K
# p9 m: w5 ^* C( e
百分比适应:
# Y7 S* j# \1 b) X+ a2 e6 S! l
以下是引用片段：
) b, Y, w$ s( H; j8 I6 c
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* e1 K& t. j' l. L9 F8 F7 |, v( v; \
<html xmlns="http://www.w3.org/1999/xhtml";>
4 J7 |$ @7 G* d' h' c6 ^! q3 ~
<head>
/ G# k ^3 o& x6 `" A" X
<meta http-equiv="Content-Type" c />
# e# M# J( A1 A' V& Y* u9 `4 s
<title>css2.0 VS ie</title>
& M- d- L/ u. d# ^( L
<style type="text/css">
+ c& w/ a; H% u5 T: J
<!--
/ |. u' Z5 b0 F" W7 B. o
body {
# I3 |6 ~- v- |" I4 [0 }" _$ {
font-size: 12px;
: i p3 M/ f' _, t6 y0 `- r( |; }
text-align: center;
) Q, u0 ~% e6 [/ d
margin: 0px;
, l% e2 w% `" D$ @
padding: 0px;
) E$ c1 y. S7 s( h. T& u, X
}
8 D1 Y9 l' k, w: m: `! n. G
#pic{
+ ^" l c, h- c
margin:0 auto;
- S/ U: e0 a5 l
width:800px;
% N. h" B- A4 `' l
padding:0;
: ]$ p, W8 A* V- V. Y
border:1px solid #333;
8 U+ O0 S4 X' g s' R- T6 H
}
& f: j$ Z Y1 m, I1 y g
#pic img{
" I# X; p& u, M, [9 R% X4 F
max-width:780px;
' N; j; Y# W2 e/ L3 }& y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
' f/ |! m& y/ f/ @
border:1px dashed #000;
0 d$ ^! R% B V8 d' i% Y
}
0 r5 u) ^& R, x4 H. h
-->
6 k4 a* b+ z' |+ G
</style>
* E7 @7 T Q" A7 d4 |% `9 ]
</head>
* n U- f/ K/ `) z' x; }
<body>
) Z) e' r# Q0 L7 y2 h7 t3 a
<div id="pic">
2 Z! |! S6 g" Y0 N, X/ y- j" q
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
& I B E) k. L4 X
</div>
0 P. F* o; t+ o% d
</body>
" n% _5 ^+ |! z* c; X5 p
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
