标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
3 [+ ]4 A* ^6 e" A2 K. p1 E! F
关键在于：max-width:780px;以及下面那行。
. j) g0 ?0 ]* T
固定像素适应:
& _8 t9 b# \) M# f+ D5 T" U4 P
3 O+ M7 d, B& E4 Q* g
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> 以下是引用片段：
: g" Z' E7 i, s" A" Y' P
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- R. l C5 K3 @5 }/ X+ d
<html xmlns="http://www.w3.org/1999/xhtml";>
" \; P$ y+ ^& ~/ y/ k
<head>
5 a. t A; B$ y6 s7 z5 C. m2 k
<meta http-equiv="Content-Type" c />
6 l6 y5 C ?" g8 E- @" A+ ? Z* K1 `
<title>css2.0 VS ie</title>
6 y5 Z0 C2 R7 |% o
<style type="text/css">
7 d! u+ i5 u, |+ m; L; [% n
<!--
" k( d% H0 I7 a- `7 \
body {
# a+ n$ N* z$ N1 O
font-size: 12px;
) z, L- f" R4 y- Z c/ ?8 {2 Z0 j
text-align: center;
+ t0 _/ X8 L# g- k
margin: 0px;
( d- [# `$ _0 p& E. B& h' C/ s; {
padding: 0px;
* [" a' ]7 k) H: K; k+ I" j
}
& k3 S7 ~' k: i
#pic{
Z* q: b( d/ B, F! R+ E
margin:0 auto;
- e ~0 }% n4 ]. ?1 i2 }
width:800px;
5 {" r. o" y9 [! T8 c0 `
padding:0;
3 X; Y% T, p' a
border:1px solid #333;
* Q# r+ \) I J8 X; ?; G) l3 p5 r
}
3 R: c) E5 c+ ^* O' Z( z! @
#pic img{
7 p6 p: @' U( K# U4 W
max-width:780px;
$ X8 s$ `" W( r" ~$ r4 F
width:expression(document.body.clientWidth > 780? "780px": "auto" );
1 r1 y( F% T9 y* Y$ A$ v2 h
border:1px dashed #000;
( D% B) ?. }% l
}
# v1 o. V$ d" x8 n" X1 K! J& Z
-->
( p0 T& {, M* P, ^5 r5 \ Q
</style>
" @) l3 j6 x2 R
</head>
5 b2 r: ~; {9 f8 `/ T$ O
<body>
) U- Y8 O7 j0 ]+ k
<div id="pic">
3 K H7 j7 }8 Q9 O3 ?. _4 y
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
h' b- `+ G# [
</div>
a1 U. d, Y5 i0 l9 q
</body>
I+ B0 Y+ L" ?. ?& @& {( @5 T
</html>
' c4 B& q. x- T2 ]& @
% ?+ H4 n7 u- i" E4 Y- Y
百分比适应:
0 W- I X {& _
以下是引用片段：
! z: u0 l* n8 ]+ `; H
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
) Q: x d# E1 ]- X5 n5 y
<html xmlns="http://www.w3.org/1999/xhtml";>
3 @" ?/ N1 [$ r: n
<head>
0 D3 I: l. F. E2 p- y# ]4 |
<meta http-equiv="Content-Type" c />
+ w6 a) j% R9 H; Y
<title>css2.0 VS ie</title>
, s# R6 A8 W( X; r
<style type="text/css">
# R+ M7 [6 M6 o6 S4 @! F
<!--
+ E+ ~! X5 c, o
body {
, w. o" X; t# T! W1 a1 C
font-size: 12px;
6 N* c( s3 o0 w
text-align: center;
' S. r5 I) R: m
margin: 0px;
7 h/ `( u& ]5 j7 h% D* T
padding: 0px;
* W4 _0 C: M' [& d- k9 q
}
6 z1 T, I. h9 a* K+ @) m
#pic{
* F% R" {0 c! w
margin:0 auto;
+ C( N. X9 F/ N. @
width:800px;
! n/ \& V2 D5 W
padding:0;
2 z5 C; o$ ~+ c
border:1px solid #333;
( C+ S/ ~' j C$ H+ g" e
}
3 X$ q: d9 s3 Y
#pic img{
" k% u1 Y& Y; a
max-width:780px;
* B' R1 k! {4 \/ `* f* D8 Z
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
0 g* ]) h; g6 @7 E n3 Y) _
border:1px dashed #000;
2 T7 \! W2 T7 a( l6 I
}
$ s2 T n) l9 M* Y: S! w' r
-->
( f' t+ C8 K( }5 o) W
</style>
+ i! T4 ~& t5 H4 m% K1 L0 w" K
</head>
. Y. _: S/ [. d- R
<body>
/ D: c8 l6 ], U4 L" q9 q: O8 i0 c
<div id="pic">
8 U3 C9 R2 p. W* \6 u
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
- y1 V. ]; I6 {# ^; ^; d' i, i
</div>
& \: v1 U8 Q+ B6 L. {; d1 g/ U: k
</body>
% {! N2 V; t9 n0 |2 g" q: U
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
