标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
( ^3 l( f D% ^
关键在于：max-width:780px;以及下面那行。
3 I; v+ W# d( y, @$ L# G: i2 ~0 v
固定像素适应:
( Z/ V" L3 a0 o1 u0 y
' J. j. a! c" a9 D% f0 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> 以下是引用片段：
- \- [5 y; J( L: k
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, h2 O a0 W" T9 M" V B" O
<html xmlns="http://www.w3.org/1999/xhtml";>
, b; O# r0 M" H! [" n
<head>
/ M0 ]2 G$ \- ]( q% S3 c" h
<meta http-equiv="Content-Type" c />
7 _8 ~! @5 n% {% e, M
<title>css2.0 VS ie</title>
7 U! [ O% t6 v/ Q
<style type="text/css">
Q) r) _- M1 ^) n
<!--
" _' i8 n. {2 v5 r
body {
* c r0 r7 i+ |
font-size: 12px;
: S9 D/ v6 ]; Z, Z/ o
text-align: center;
5 D3 |4 H7 u% P( g& b. F8 l
margin: 0px;
# Y, G0 J# @+ C% u
padding: 0px;
$ Q9 h5 n. ~& e' C: L% S: ?" O+ w
}
9 w+ q O0 s4 W7 K
#pic{
( k" C. T+ s5 ~) X+ a4 _5 S- B
margin:0 auto;
2 n; Y- F: X; s6 N! L; k( @/ Y
width:800px;
! Y7 ^4 `" | I4 X
padding:0;
; T0 E# b9 t3 Q; P
border:1px solid #333;
" ~ W3 p" t( Y
}
: V- H& g9 h7 i6 O+ S9 w8 Z" H0 v
#pic img{
* ^( @) B. r4 H7 S$ B
max-width:780px;
4 m4 G* L5 x$ `/ {, w
width:expression(document.body.clientWidth > 780? "780px": "auto" );
! J2 p7 w" d: A+ O
border:1px dashed #000;
# i4 h1 L! R, E- a
}
2 w/ |5 z* J8 w& q7 S2 r9 M! w8 P
-->
, p, Z4 t' Z7 [
</style>
3 ]. d( N( w3 l' a' u
</head>
% \6 L! O6 O+ W7 R5 T5 m! G3 l* `9 c
<body>
! E6 v8 I$ f! P: V1 [
<div id="pic">
# q7 \, p. f) e: n
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
% b6 t1 N$ |' w$ {
</div>
8 z5 D, c. t4 M* [" w2 T# U
</body>
( D) r* Y: s3 [
</html>
5 J2 E( i: v f* g6 O
7 |9 e# k8 r7 N
百分比适应:
7 S* o+ z2 m- N/ o0 |
以下是引用片段：
! B) ~. N3 d1 D& M+ q8 `% @
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ ~9 ] ^6 `, R4 y" E; _8 |
<html xmlns="http://www.w3.org/1999/xhtml";>
6 {9 t$ C( ?. J- ?* M$ ^% `
<head>
4 q+ r5 X$ M5 A2 j2 | q
<meta http-equiv="Content-Type" c />
3 J4 N6 k+ ?/ f' Z
<title>css2.0 VS ie</title>
0 t# D& D3 V0 r2 h1 Q1 f
<style type="text/css">
: B2 U0 m. o( w* M* S
<!--
# Z; B8 z* z! \# u
body {
y- z8 B- N: z+ M* q2 I: `
font-size: 12px;
& y0 W$ E) _7 W: e0 Z) C1 |
text-align: center;
' R/ N) y+ v. ^. k: o# y" N. D
margin: 0px;
/ C* @# A' r' G% n- x6 t# o
padding: 0px;
5 _+ J# [! S9 U. Z* Y# Z! u
}
6 s u6 [9 b6 Z1 c! H' ~" k2 O; l
#pic{
1 i& G& q0 T8 k; ^; c3 B: p
margin:0 auto;
$ G( A! i% H! H+ T# v' ?
width:800px;
% |$ |* i. S/ E, v
padding:0;
6 I' R+ q2 P3 A9 }! m4 n+ c
border:1px solid #333;
M' b+ u y3 O# @0 h
}
- N2 r: T* C7 \2 v) F% O6 ]
#pic img{
7 E7 r! C- t \: P d4 z- E
max-width:780px;
" L Z" D$ L# n9 K% [' W2 f# D' C
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
( ~$ |# ~; L d4 v/ P
border:1px dashed #000;
& { Y+ B- A( [3 s5 Q( U6 S
}
, r' R% n# S# Y/ A& T
-->
" S4 }& z. m6 q' l2 b8 F8 a# T T
</style>
- |9 H2 M2 U# q# r# @4 q
</head>
7 r8 t# `6 h& ]! g7 x+ q
<body>
& |% {# N& F! g" k1 N
<div id="pic">
" R" u7 L( u; G
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
1 i. L, Z! _: b5 Y; v) U0 l# B
</div>
! Z1 ]& G7 l5 k" R, N( W& J8 Q$ r
</body>
# o9 o/ K ^! N5 [# D v, t+ @
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
