标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: ^$ S7 z1 }9 s1 z; V6 A2 I, |( O! P* f
关键在于：max-width:780px;以及下面那行。
% B4 T' i8 x" \4 O5 f' v
固定像素适应:
1 A' \" a }6 }3 s4 J
3 @5 p1 r2 V; n! `3 O
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> 以下是引用片段：
% a1 C% }3 `' R G7 c: T5 K7 E( ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% ^% Q+ ?* T; B2 l) ^( q# r
<html xmlns="http://www.w3.org/1999/xhtml";>
" t( S* V) |4 F2 q7 U3 b* V3 {- i
<head>
1 h% n% L5 O. A/ I& g2 B
<meta http-equiv="Content-Type" c />
" ?* L) E" I) V; a7 q* n4 [
<title>css2.0 VS ie</title>
# a4 K0 x+ r" U$ W. m
<style type="text/css">
; q8 e4 y8 `1 V$ g
<!--
~9 P* f1 U+ B8 c
body {
* t P5 h- n) U2 C
font-size: 12px;
. R% V$ ^+ h; B9 a$ B$ `
text-align: center;
5 e* O; I: t4 z) }. w
margin: 0px;
/ J6 s$ w- y( Y* r
padding: 0px;
! t8 o' g$ Y3 p" A- R9 r
}
8 @# P% h8 D4 I: B; K
#pic{
3 I2 _* g' ~3 E4 L8 A
margin:0 auto;
2 |6 t: }; K5 ^& V) ?& N
width:800px;
% N0 m8 X0 v9 C, x
padding:0;
# G' F& ^" a8 E, J
border:1px solid #333;
3 d+ K ]. W, l& P- \2 G
}
) g9 m! w: e3 h5 M7 S$ x8 @6 F
#pic img{
! d, b. f+ t K* s- T3 a
max-width:780px;
) N0 W( o/ ^; O: y: l Q
width:expression(document.body.clientWidth > 780? "780px": "auto" );
) b3 F0 M" s% q, l
border:1px dashed #000;
2 A( Q- Z# L1 {4 {* K( B
}
* S) R& [. K9 r8 u
-->
4 J# k, e' P: D% v' B- J
</style>
5 C3 i7 r/ s {( q
</head>
9 P' |. C' W5 K) n P) w/ j
<body>
/ v! T9 G* V: n7 k/ q4 K% M
<div id="pic">
) K! \% z$ v( B( E. a/ a( O, I
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
# ]: m) n! S2 N1 _& w8 N; P
</div>
5 l7 g: K6 R5 @7 D& t: N8 s( ]
</body>
% F8 i8 V0 i* q7 r4 D
</html>
4 f5 Q1 i. a _" r, a; W
! X& F. O. h2 c2 _! d( C
百分比适应:
0 r1 B6 n' u5 s+ B
以下是引用片段：
" _: N7 B% j1 N
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ K* V; R9 |# r, S" _* I) g
<html xmlns="http://www.w3.org/1999/xhtml";>
- o/ K! v: J' a+ a: r
<head>
6 [* z" U. T. p; F9 X) ~
<meta http-equiv="Content-Type" c />
7 a2 f. p) b( [9 v
<title>css2.0 VS ie</title>
+ L& M3 N. \1 ~ \! F
<style type="text/css">
, X1 Z7 v/ j% h' ~
<!--
; ^9 V$ I( Y4 L7 l& Y4 b0 J' i
body {
/ d/ E' [9 Z2 ]3 u3 S! d6 I. o8 u# V. `
font-size: 12px;
- f7 f# X- A. x2 b9 W. L' @& P3 v3 G: T
text-align: center;
( _( {( f1 i5 b$ S
margin: 0px;
, L" e: D$ `4 N' q4 C
padding: 0px;
0 J' u$ t( u" E2 N! a# i1 d
}
3 p- z; Y9 i( T
#pic{
" r( n6 C8 ~% ?/ P
margin:0 auto;
* P4 s7 f, y" J: o9 z) `" x
width:800px;
% D* j- G! i5 c
padding:0;
0 P" ?. C" q+ m: H' j; P& m: Q
border:1px solid #333;
/ j: B. h3 O7 @8 E; _. H
}
9 I. A# ?' ?5 c! }, V- P5 P
#pic img{
' V f* S- Z6 u; G6 F8 H6 N; a
max-width:780px;
3 u0 V- }5 [" g2 X
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 w: u& S+ I: c j" j
border:1px dashed #000;
4 v2 w' s% j" ]8 y4 z
}
' R$ S: w/ {+ R/ w9 G) S H5 I
-->
/ F9 T8 z0 _' V$ H7 w
</style>
1 h# W$ u4 _# c( Y% K! ^
</head>
+ b' N2 e+ V, p! M
<body>
# Q! B; s% \! k* \5 ^" i
<div id="pic">
8 B" f* F2 O$ }4 D1 @
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
! h& h4 C5 L* k, ~' Q- S# Y9 U
</div>
2 Z2 n# ], v0 [9 J- M/ _
</body>
3 M, D. ? j1 ]% l* D
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
