标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
- ?; A5 ^4 U' P# S Q l
关键在于：max-width:780px;以及下面那行。
8 Y( q1 E' d3 W7 T( b; @' ]& b, [/ h
固定像素适应:
# q) ]& S3 Q: `3 N! K/ o$ Z/ M
; _$ G" O9 Y# h3 H' Z3 q1 C \
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> 以下是引用片段：
& X5 `% g+ w3 j3 t5 ~+ x
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 Y8 H7 m; q% p* v
<html xmlns="http://www.w3.org/1999/xhtml";>
* r+ K w& {) E2 c$ b1 F" `( A
<head>
+ @8 G) u& f) E! B+ `
<meta http-equiv="Content-Type" c />
' |; B. X* m+ \/ K
<title>css2.0 VS ie</title>
s6 T8 I7 P/ U% R$ S' m& j" L, a
<style type="text/css">
4 K: J' f1 M* v* N% k8 e1 u
<!--
6 C# k+ @, z3 n
body {
9 O2 b7 H Q2 A& B/ |
font-size: 12px;
/ I; `1 ~1 k4 G& A
text-align: center;
) f5 [" i4 U+ U& u: O
margin: 0px;
6 m+ l& k- L( T9 Q6 v2 E k
padding: 0px;
' s; ]4 C- W4 i+ [ X- r! S0 y
}
* D! G6 Q( h9 I2 @. W7 V3 q
#pic{
: n3 J0 w) d& a! v+ Y% \3 c. E
margin:0 auto;
' B. W9 x3 S! y, x" t( l
width:800px;
8 M2 @- m9 ?# Q8 @0 }
padding:0;
/ \2 |4 s) `7 o/ y7 p( d6 @: `
border:1px solid #333;
5 t+ F$ R: y4 H2 V0 C- q( a
}
3 C3 b" g# u: i- {
#pic img{
4 x! {7 E! I% r$ O' A" ^
max-width:780px;
* l0 m ?( X$ \) p
width:expression(document.body.clientWidth > 780? "780px": "auto" );
6 O: |9 _0 G6 y: _% R: \( g7 g
border:1px dashed #000;
4 v2 | E* w+ C5 @" p
}
0 e; H# F6 X- h7 ?; f
-->
+ z7 A/ Z' M$ y- p9 K
</style>
1 A C# H* ^' G) r- Y' n+ h
</head>
* ^7 }& N2 [/ T% o
<body>
* h. A$ \: l5 o" O7 p
<div id="pic">
" `9 B. D9 ^* K4 b7 E
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
) \/ n+ g, U$ Q5 ~. m% B. f# s
</div>
% [( `9 @9 ]7 ]# L/ M, j
</body>
# f* M' @6 K: O. y
</html>
; c% b3 t; f6 A% G& o& ^* X
; {8 E: H* l6 z% r! L- _
百分比适应:
% |" X# R5 h/ g1 { V! b* D
以下是引用片段：
3 b& R5 S3 P; h1 }9 k
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 H: j, W- o) p0 c) q
<html xmlns="http://www.w3.org/1999/xhtml";>
" r/ [5 F3 H6 J% M* t5 [$ K3 K
<head>
3 A3 s% f0 I9 {, \% M$ T3 u
<meta http-equiv="Content-Type" c />
. h- b: u- H; P8 b+ @
<title>css2.0 VS ie</title>
N6 U4 v! }) ?" T& Q5 j+ _
<style type="text/css">
# ~, ~9 O9 v( X! Y) R" X& W: w: r
<!--
4 W2 A' ^2 e2 z0 m. ?/ K% i( M
body {
% S$ W7 X; H! Y" _2 F, K! N
font-size: 12px;
$ k6 `" f3 L$ g1 M) e( w7 f: C
text-align: center;
. ~1 l$ w1 I2 i
margin: 0px;
& Z3 F& i7 l, F9 b! j' L
padding: 0px;
) P4 o7 H# R6 Q9 r( [9 V
}
0 Z# I! G6 y3 X. ^" V3 l2 X
#pic{
& ~1 o- l! h7 M9 g1 d
margin:0 auto;
' a" u* v7 S) {" V Y
width:800px;
4 p9 m. u/ @; I( a+ G1 V5 E* D
padding:0;
. H3 {# S9 S9 d. I0 I
border:1px solid #333;
2 Y; z( m: W4 ^2 R1 F& q
}
1 o4 F- k, t6 s! T$ K
#pic img{
- F% I% h1 A0 \; w m" f
max-width:780px;
7 l1 F `' h* h0 c! }% D
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
% ]( U+ p% \+ m9 p9 ^
border:1px dashed #000;
) x8 x; s4 u- T' n. {& K% R
}
+ K# G8 \# {; k0 v1 ^* V, B( I
-->
# u7 g5 d1 q7 z% ]. }
</style>
+ T' q$ T9 N6 s* R
</head>
+ D4 q9 B* Y7 y$ S3 r+ c
<body>
~2 d& p$ P J# m6 V* K. \
<div id="pic">
0 Q8 k3 I# q$ [6 n' m
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
`1 ^" f v7 P
</div>
* M7 \3 ~# `7 f3 t* M; w
</body>
# G( ]5 j7 z5 J9 ?1 j' Y3 t
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
