标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 ?! h# [( A% j0 \
关键在于：max-width:780px;以及下面那行。
1 s8 h/ L8 s9 c* l9 H) h6 o$ b1 k# F
固定像素适应:
g7 O2 X3 V, A s& R$ f. M
, O4 {3 t! d1 x8 d2 s
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> 以下是引用片段：
$ ~; M; A" {; E: I0 d
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& V8 r4 |4 }1 ~, j9 F; |% W- H% P
<html xmlns="http://www.w3.org/1999/xhtml";>
5 }' v! J* {3 t: A, p0 u
<head>
" b6 g- Y" l1 [0 @0 m' c5 H
<meta http-equiv="Content-Type" c />
! S- C) g! [3 l( c$ _% m
<title>css2.0 VS ie</title>
@; ^$ O* x6 O, X& @- [, n
<style type="text/css">
4 f9 B0 Y3 f- m2 A1 A2 A+ N
<!--
$ s) g* k( @* f3 P9 r* S
body {
+ M, `4 W* X' D$ m- U8 u
font-size: 12px;
& F" ^8 u' \; X# `* T
text-align: center;
, A4 G& T* Z1 N
margin: 0px;
' B- P3 t# Y/ i8 A. N! S. Y: u
padding: 0px;
% [3 v9 d& a- F# v/ @1 n
}
% I8 [; u9 } I9 `6 u) N
#pic{
) H/ @4 n7 X6 l+ J- Z8 ?
margin:0 auto;
5 E# }5 l' R6 P% X" z& c
width:800px;
: R8 h' l# w; y- V0 p7 p; q/ w6 K6 F
padding:0;
# Z8 n. a" h% ]$ Z k4 z' }. o
border:1px solid #333;
; q8 r0 Q" N5 `2 \( l7 Y: A
}
; }0 g9 n7 e, \. I( [6 d* l
#pic img{
3 M. H6 { K# G, G+ X# [& J
max-width:780px;
% X8 Q5 f8 q; Q0 F% ], F: I
width:expression(document.body.clientWidth > 780? "780px": "auto" );
: R# ]) J; |! J9 k+ ]; L1 d7 m8 B
border:1px dashed #000;
]# n; Q3 w! k
}
' n5 k& D2 W) I- Q
-->
. {5 a7 S$ {. M" T) T! R8 o
</style>
6 H" l% w( ? Z, U& g
</head>
, _4 M8 z/ w& u: @' h
<body>
2 t/ B W% ~7 K0 }* E" K _# G5 q7 H
<div id="pic">
, X) p! {$ D6 R
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
5 e! f% V5 R7 m8 \5 e1 g, F9 a( X
</div>
& s( e6 \' p, `
</body>
. s' z6 t0 E8 L7 }, _
</html>
% T7 a+ d& A8 Y
~- g1 I9 w% [- t$ P; |
百分比适应:
0 E' H# ?+ Z ~+ N2 X, \* M
以下是引用片段：
% h% M- f9 c6 Z, T S$ m
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( H- y) j+ B4 l# j/ e7 J
<html xmlns="http://www.w3.org/1999/xhtml";>
9 L4 c* w; e Z: \) i
<head>
6 `* M, N) u; D7 z5 h
<meta http-equiv="Content-Type" c />
; v* m' I" O' x* ^8 o
<title>css2.0 VS ie</title>
1 a, |( o W* L7 U! S4 w( t
<style type="text/css">
N# i2 P" ]/ C/ B
<!--
# z9 B$ |! v' `6 [
body {
' t, Q& \! F+ W- F5 Q5 F
font-size: 12px;
/ {8 ?+ W' u* z: A7 p% J
text-align: center;
! p5 q& V, e, _
margin: 0px;
( H' v1 q* i; R
padding: 0px;
* I8 J: g) e* L$ L3 J
}
' K# }. T# H: R
#pic{
( C0 e# ]/ n, ]
margin:0 auto;
# r. Q$ A" q" x( N5 D
width:800px;
9 {# ^1 X+ ~! o% o3 k) W
padding:0;
4 O& S; b6 ]; A. R
border:1px solid #333;
8 r6 z& |3 U F* X! y8 z
}
0 t' ~% o9 X, r+ s; d, O
#pic img{
: E( ]4 p* ?/ r+ e9 I3 z& R( ~( k
max-width:780px;
4 I4 H8 l- h* L) y( ?
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
4 x# w) ]8 ?/ h( D
border:1px dashed #000;
7 o; Q0 m1 j: O. A% P
}
0 t8 f2 K, j q' _
-->
- a1 o4 A$ n) M9 t
</style>
' h. P7 P6 w# D$ F/ d5 e; q
</head>
1 B' |" R+ U+ r$ x3 c7 x, `
<body>
+ J2 l2 F, l) `* E* p4 {
<div id="pic">
. n7 ~2 z- q( d5 o6 n
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
9 { c2 H, j' ?# N
</div>
6 j- `/ {1 Y. s; T4 G
</body>
4 z! B( v$ D3 [% k7 D
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
