标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: f+ L. K, R B2 F
关键在于：max-width:780px;以及下面那行。
6 n1 v* |: B( \+ H4 S% _6 m
固定像素适应:
- k: W& L: d& {
0 w6 h4 j6 N% i7 |% A- 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> 以下是引用片段：
: G7 G; R6 b J
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 U, x! K+ j) I& E" O2 O
<html xmlns="http://www.w3.org/1999/xhtml";>
8 `$ F' {* i0 B: d
<head>
; T9 x+ y! z- I6 O) I
<meta http-equiv="Content-Type" c />
; t" b5 R2 t* m7 K
<title>css2.0 VS ie</title>
3 _4 B6 E; R3 S9 }5 t% u, k
<style type="text/css">
; H8 f; U9 ]7 f# [. R
<!--
& D0 u" c2 d( E) R4 ^7 N
body {
. d( D9 w& \! X" f6 }( J
font-size: 12px;
7 d# V; x- E& n6 e6 y5 W$ M7 S$ [! ^
text-align: center;
3 ~ p3 F9 W% s7 m" B9 [% I
margin: 0px;
; ~8 G7 o6 o8 \* U7 T0 h/ ]+ c* y
padding: 0px;
" I0 b$ n! N3 k# u! A
}
( S6 f5 o) s" G
#pic{
4 Q9 y/ [& J6 M% H4 {( F5 l
margin:0 auto;
1 `6 @4 g) v9 a) |6 s r
width:800px;
6 k6 W. t. x" O- {$ E- H! i& N Z/ W, v
padding:0;
3 e2 ^$ i8 | S, z4 Y
border:1px solid #333;
1 n& K' u# m' ^
}
" R9 l/ Y1 Z b- r) V
#pic img{
4 y, k2 T, V7 p4 Y7 e5 d1 w
max-width:780px;
D. m+ }, U' g" {, P6 Z6 V8 l
width:expression(document.body.clientWidth > 780? "780px": "auto" );
" f6 r6 r2 r8 c! I/ B
border:1px dashed #000;
! q: M, T! I c. \- E
}
0 x4 {% S5 R. y6 Z+ d5 @
-->
9 s* ~2 ~5 ]- F, L; e& N6 r0 w; R
</style>
2 J: C' Z: J/ w" p2 j; ?
</head>
0 m5 a; M5 o! g( w7 w
<body>
7 L9 `' w1 t8 t {4 ?, x
<div id="pic">
: y2 g/ i0 R# N1 f) ?# U" ~* Q
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
. p# C8 V. v8 w- {
</div>
# l: Z/ b0 h2 u; A3 t- ]$ J% @
</body>
4 A$ H! z8 S% s+ w5 I( b, O
</html>
7 C; K* s p" @$ b" t
8 \0 q6 @# G* D9 m" Z/ x: I
百分比适应:
- s! ?+ G9 B' i0 c/ q
以下是引用片段：
1 t0 {/ _. ~+ n1 k- q: `2 E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 h% i' q, Z9 j& E$ V0 a
<html xmlns="http://www.w3.org/1999/xhtml";>
V. e. x! b+ v- I; g
<head>
( Z7 n% c6 c/ m3 `- q1 A! m
<meta http-equiv="Content-Type" c />
+ l+ Z4 G' b/ l3 Z; U$ F7 k. {
<title>css2.0 VS ie</title>
& a: I; v& ]$ ^
<style type="text/css">
0 I4 \' s8 q/ L3 T& S
<!--
8 v0 g) X8 Z0 h3 F. l
body {
4 ~/ n! `# |- ]0 P
font-size: 12px;
- r" k! c( Q) p% p
text-align: center;
* y: k9 G& }3 j" C9 {! H
margin: 0px;
1 M$ u5 o, v# s: h
padding: 0px;
8 ?& O4 k7 o4 q% I" \6 m* m. Z/ o- K/ ~
}
% `. h$ S: z' K* @5 i3 A0 @8 X
#pic{
% G2 M4 T' y2 M. h: Y6 [( u5 d) K
margin:0 auto;
, t0 s! t/ j9 V+ v$ {: `
width:800px;
s+ e. |9 q/ G
padding:0;
, P+ h* P- j/ i& ^4 ?. V
border:1px solid #333;
0 J+ `& w `/ U+ j. Q
}
/ c W5 L! ^; l+ G7 ?9 }, b
#pic img{
/ j/ p5 K# T6 A/ ]. J
max-width:780px;
) l9 ]1 ?$ @6 Z: l, e9 M
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
8 v& S! J0 P) e" k5 T, [
border:1px dashed #000;
D& ]: X* _, u6 x* ]& R
}
$ m1 z) C- {9 z& S5 U0 l$ }$ }9 C
-->
( b5 d& B- h0 Y# P7 m9 ?
</style>
7 E+ |# L& ^ r
</head>
' y+ ?7 [. l: b! t0 F3 B
<body>
% |* m! [, T; @
<div id="pic">
( j& f! B* F' [* C6 A$ c. t
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
g, ?) z2 ~# I
</div>
1 e6 _8 L/ ]8 A; Q6 w( o; d
</body>
, p' _1 m! G0 I) _# K( P& g \
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
