标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
- _8 e. ]$ ^% A) e! R0 M
关键在于：max-width:780px;以及下面那行。
/ N6 P% \* r( R; V
固定像素适应:
% _" Y f U3 {) l
$ o: [/ G0 ^0 u7 B; u2 x" V
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> 以下是引用片段：
* D/ r: y! Y/ A% N9 }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ g1 L$ N4 G, D5 x* s, @
<html xmlns="http://www.w3.org/1999/xhtml";>
; V: W4 {& U3 [
<head>
2 h `. u5 ^! K4 W9 m" N, u
<meta http-equiv="Content-Type" c />
8 R- y e" F/ |2 c9 Y9 N0 m
<title>css2.0 VS ie</title>
6 K v5 H- I3 K& f0 G! b; |( h
<style type="text/css">
p# `9 n; f% M
<!--
% l. K4 j% ~- }/ M `! Q' b
body {
# q! C8 I/ v Z0 u% s
font-size: 12px;
4 R* g, Y K1 H; g% k
text-align: center;
. F- W+ Z4 p/ I# B# T/ U; F
margin: 0px;
0 }6 U# l% H; P
padding: 0px;
. @ u- ]- b! D6 f
}
/ ^4 @/ j9 e- B5 w
#pic{
+ C* j: e7 _6 B+ V" L5 z
margin:0 auto;
" Y- a3 I- c' z0 I$ \$ b5 P, h. @7 U' D
width:800px;
9 b8 Y& g/ J) C/ e2 ^3 A) B
padding:0;
2 {4 p1 g* w! y3 h$ ]2 K; t9 H2 g% [/ _
border:1px solid #333;
( u. O4 p, ?8 B" C
}
. i6 `3 k" G7 x ~+ X
#pic img{
@3 {9 h9 m) E: |, X
max-width:780px;
# w0 H0 |1 k: }; a8 Y+ U
width:expression(document.body.clientWidth > 780? "780px": "auto" );
; y8 {* ?/ ~1 t1 C& [' [, g' ]
border:1px dashed #000;
. l# C+ q* h. T, N6 D+ M" C1 m
}
) e3 K; h/ j+ U4 |( Y
-->
$ H0 |: H; d5 Z
</style>
& p/ l9 f% ^" b4 e. x
</head>
: Q& Z' Q, n( ]5 Q+ M# ~
<body>
" ^+ r/ \& |- k
<div id="pic">
" l9 [( S& X1 u% p# W7 ~
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
* r# T! J- O4 E5 b8 f3 n
</div>
4 H6 q4 h9 C T1 `1 g
</body>
6 P# K1 S2 {' V u' t7 b% I
</html>
V9 w0 V! `. w
/ r k6 R+ q' k: l( @
百分比适应:
: K: |" D+ i" V( @' U! x
以下是引用片段：
B% k) y/ d( r1 s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ y- [ l8 T, ?0 V
<html xmlns="http://www.w3.org/1999/xhtml";>
$ k- f7 u5 X% j
<head>
5 |1 q |9 ]8 F' Z: H) ?% v5 G# }( @
<meta http-equiv="Content-Type" c />
X! I+ i+ G/ g) q$ W( b9 ^# n1 x2 Q
<title>css2.0 VS ie</title>
8 k$ @% A- m/ ^, E& |/ `
<style type="text/css">
) P4 i0 A1 I# ^) n2 o
<!--
" z9 g! i, v6 j9 |4 J8 c# u( M
body {
8 f! P- W- l' T" D" m
font-size: 12px;
8 m! r. y; ?. b# i4 t/ l
text-align: center;
( H- s! q/ n; ]! ]
margin: 0px;
2 ]. M/ P% d1 G* X# {' Y4 N s
padding: 0px;
1 d9 E% `+ U$ s+ H: `: t* O
}
. F5 m, \/ ?7 L+ G7 ?' h
#pic{
) q2 k- c5 k+ E2 ~. z
margin:0 auto;
& @$ }6 ?8 y4 ?
width:800px;
# l# F% c' t3 W0 w% @: t
padding:0;
- H; p9 I0 W; L) u1 I J
border:1px solid #333;
& ^+ {& w7 r& A& b
}
) B) n' w( z p( p5 G
#pic img{
% w+ A. w9 S1 g$ P/ \& i; T' ?4 p& f$ e
max-width:780px;
' E& q3 |. E- ^# E
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
$ s J6 P' ]3 |6 x; c" A: A
border:1px dashed #000;
! ^4 B# n' A8 w( R8 Y1 `
}
* S! `+ V) V# q0 ~ j3 @( ?
-->
0 r+ L t, ~5 z6 r
</style>
1 F/ n' n! ~( o1 _5 P6 [7 t
</head>
+ J: ]) M8 |9 R B- m8 Q1 T9 b
<body>
( y, ~+ u; a9 i9 Y% O p4 S/ O2 @
<div id="pic">
2 A2 ?4 M& E( Y+ T9 Y& k6 F
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
+ |+ r) v5 ]& J; ^4 e. t
</div>
7 [; B" d3 I' Q! c" {" f6 z- _ k
</body>
1 { W2 M8 Z; ^7 k1 U
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
