标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
* P' ]8 c! r2 ^1 |8 U0 R+ _8 S& M* A
关键在于：max-width:780px;以及下面那行。
, a {( {& x* y
固定像素适应:
4 a9 o: `8 o* {
2 A( ]/ {" m5 q8 f8 X0 [
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> 以下是引用片段：
8 o8 c* k6 H$ a- C) }2 w
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' D2 X0 f; b, ]1 m4 G
<html xmlns="http://www.w3.org/1999/xhtml";>
% `3 b0 e4 D% y
<head>
$ N: a6 h& W2 K4 _ U3 n
<meta http-equiv="Content-Type" c />
3 Y: w. J0 a9 F. b! r8 y; t( `
<title>css2.0 VS ie</title>
9 h! T6 z( m6 U* i# S. e3 V/ g
<style type="text/css">
4 ]$ y" w. y& x: Y7 t) D
<!--
: v- X" q' a& n0 W% i$ b" o
body {
' Y! \8 z; c+ E2 }6 U" T
font-size: 12px;
" K7 I) t* ]" G9 U5 f; l6 B7 Y
text-align: center;
7 F( \: M% u- @$ C3 Q
margin: 0px;
+ i* S9 ~$ `8 U( v
padding: 0px;
+ |! X7 V8 Z1 N( y! F. i( O7 N
}
3 B5 ]3 d( C' ^9 h
#pic{
; p' W/ A( @0 V+ p# x: k; V
margin:0 auto;
* c- \7 _7 O2 Q( z
width:800px;
- a5 H. [4 f2 P, l
padding:0;
w: _2 f$ T4 m Z
border:1px solid #333;
# ^- w( P6 Y9 }2 p$ V, T! }2 ^. i' u
}
" Q( N4 v1 W- ^5 r
#pic img{
$ |5 a: Z4 J' y( Y) d* o
max-width:780px;
) p" d* v/ t# P) z Z
width:expression(document.body.clientWidth > 780? "780px": "auto" );
# E9 X! F( H8 J2 r
border:1px dashed #000;
& |% w$ ^% e% A2 O2 y) ~
}
: O- P) @" y" T$ _8 i" @
-->
) Q9 t: @9 w* w) \/ e
</style>
* T8 t" |* G1 M- d/ M2 D
</head>
+ X- \6 b7 E$ |3 S% {* b" q
<body>
9 z0 F( h# ]) N% ~8 {! v2 H
<div id="pic">
: U, z$ x9 j8 W
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
], `& k) v, S
</div>
2 o5 j: V$ o! w
</body>
' M, g( k/ O9 K0 w
</html>
# N1 ~ |0 D+ _" h7 R
! O* t! T. D d
百分比适应:
, X9 l- {: I/ G; L9 m
以下是引用片段：
. |" j) X$ n4 k7 E( i8 n8 Z) o
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, [! y& s" W* a8 ]/ s- ^, ]
<html xmlns="http://www.w3.org/1999/xhtml";>
+ u" X6 ^4 Y* y9 M$ B P1 o
<head>
6 \- z' L7 ? w- {5 ^3 s
<meta http-equiv="Content-Type" c />
% S! p* y5 z+ _! _ R. [ f5 ]
<title>css2.0 VS ie</title>
& s* Z$ w4 W2 T7 \6 [+ R* ]
<style type="text/css">
, O2 Z; W! F _ V( ~, _+ F
<!--
+ u' _* U) j5 |4 K* M0 J
body {
o, `9 U8 W) b$ O7 X
font-size: 12px;
9 n$ l, Y9 l3 W. e5 e
text-align: center;
7 t; b( e! R) \2 R
margin: 0px;
5 J/ m: p" e9 x! }( x( J
padding: 0px;
- o" {. v7 o8 `/ K- n Y
}
- C9 ?# j8 P; L" P6 e4 k) S8 v
#pic{
6 v# N7 G9 T% V
margin:0 auto;
" ~. E4 C. \# k
width:800px;
: P, z: |3 H5 s' y- ~0 J
padding:0;
4 g* x: @9 t: E# z, S
border:1px solid #333;
6 B! k3 {; M3 I
}
: J+ X" ~$ Z% { ^6 W# e
#pic img{
9 o2 f% n3 D8 I( @) m% g
max-width:780px;
0 S6 `* X7 {5 H; w) W+ D
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
& m5 W4 Q+ M' q+ Z: w# N
border:1px dashed #000;
- I. L4 D9 I0 w9 Z8 y/ J
}
; r5 I- C+ t# o; T) s- O
-->
+ }( r- b5 {4 n1 g! B
</style>
6 O* V, s5 E& L
</head>
& U, S# ^' G$ |0 v7 q1 U3 T. w
<body>
# X/ r" F. F# J6 b( J5 N; e
<div id="pic">
* k. g9 i6 z: d8 |
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
\1 ^, s3 R" U; C
</div>
9 r3 M) n' |' I
</body>
5 ]" |/ ?9 F5 y- j
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
