标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' z g0 e* R- ]: z
关键在于：max-width:780px;以及下面那行。
3 q+ n$ H9 E/ Z- Q6 q' j( N
固定像素适应:
$ n( o Z( V3 d+ r! ^
# x8 Y( k7 `. l" A7 a4 ?0 a
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> 以下是引用片段：
, P W# x. ] [/ P
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% E+ R- r5 H# v5 b5 Q
<html xmlns="http://www.w3.org/1999/xhtml";>
# ^3 U/ g3 F$ S5 a: a; _( f' F
<head>
7 F4 Q& x7 F) s9 }" s- y- Y
<meta http-equiv="Content-Type" c />
! a6 S: M. ]5 n! y" H& a1 w% N
<title>css2.0 VS ie</title>
& j/ O" k9 t; A$ Z5 i; m
<style type="text/css">
0 ^! W4 l; y* ?: }
<!--
8 e& |$ j( Q: ~
body {
0 s; m% u: D' G: W* K( b
font-size: 12px;
4 G1 |' v D( I
text-align: center;
: h% \- e4 X$ @5 ^6 _9 L
margin: 0px;
7 [5 S: F4 ]3 c
padding: 0px;
3 X* w+ a. _: { j5 d0 G) g
}
3 N+ |% O8 [9 G T5 r& @
#pic{
3 X! v, Q& [' o) ?3 F
margin:0 auto;
# I, {' n& c% ?, y
width:800px;
9 z7 a: g6 \( ?! p0 E0 F
padding:0;
. \- K9 a3 B) r6 b n
border:1px solid #333;
4 E6 I1 C7 v3 Z7 g/ S0 s
}
- A) x- D9 E3 _( ^& o9 b
#pic img{
; f4 R! ^* g+ e5 j+ X& W% b
max-width:780px;
! ]( ^. r' |' d9 L3 L
width:expression(document.body.clientWidth > 780? "780px": "auto" );
" J2 s M6 d& q8 m8 O7 \/ d
border:1px dashed #000;
5 G$ ^1 ?7 I: }! V5 Q1 _* z
}
5 o g* C/ \& ~& |9 z5 \4 w
-->
$ k6 ?6 u# ^+ S4 b
</style>
& D* X# N3 F: l5 H
</head>
& g5 d, k8 p# @ I
<body>
& C7 V. _# `& ?" X/ J( W( Z
<div id="pic">
8 a* E6 D4 M; k* g
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
: C1 s( c' ?1 Y ~* Y* _% @# s: O9 B& S
</div>
+ I) T" B/ A3 ~$ v2 |# Y' S5 h
</body>
9 G: ?1 j0 F5 G9 d) W: T7 c
</html>
0 ~. V# D* Q% k( a- s
: I2 `* c5 j6 Y
百分比适应:
# o: v0 S9 d8 k# W. l
以下是引用片段：
+ U8 N7 [. c. Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% u5 ?# `3 r" t y1 j7 S0 _- r
<html xmlns="http://www.w3.org/1999/xhtml";>
% I) w9 V5 x d0 T
<head>
+ ~9 V: A5 C% k6 v3 u6 H/ g
<meta http-equiv="Content-Type" c />
( D+ V: f! O9 S T2 {) t
<title>css2.0 VS ie</title>
- ]1 Q) i: Z9 L& s5 V9 n
<style type="text/css">
- o6 d( e- j. U' q3 H
<!--
7 a7 B: A2 ?1 t3 _5 E" h, P/ R
body {
+ w4 x, ^6 {: L5 w
font-size: 12px;
' c$ s. L. ?3 F$ @3 o; @
text-align: center;
# P: z' D2 t( v
margin: 0px;
7 t% G# U; S% F/ A* ]2 d
padding: 0px;
3 y! E! ^3 v" w% J! d
}
/ b2 A5 n! a _# T$ x
#pic{
/ L7 }: P0 C, U0 M- i
margin:0 auto;
, L& D7 B" |! p A
width:800px;
7 T) F& L) M5 ^- Z4 H
padding:0;
& R+ T1 }) I6 l, d: O5 F9 Q' b5 j
border:1px solid #333;
7 {4 R% J+ t9 w! H' P
}
5 g U) F# Z: S A: T, M: X
#pic img{
2 e2 d3 h" K# M5 b. M! H a
max-width:780px;
# g* G' ~$ T, g2 e6 ~
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- Y* j$ w" F+ v7 H
border:1px dashed #000;
; k$ j1 B- ~2 w
}
( A' ?5 E6 H& @4 g* v
-->
( h* @3 X. x# F; u
</style>
" A+ v! ?8 s, }; ~
</head>
7 X( z3 `% M' N: g2 k( S
<body>
3 L- Y* H8 Q) z ~3 t7 K
<div id="pic">
3 r; A% Y1 R, ]; r
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
* b7 J& z* z9 f0 I2 I' {+ M& w) v- \
</div>
$ E- Q( l5 Z7 m0 V) {/ @. n
</body>
- x9 ]) T. j1 a
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
