标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
. R( A2 O8 ^1 e; M, O6 f
关键在于：max-width:780px;以及下面那行。
; e1 _5 J1 C; V
固定像素适应:
6 b4 |; O9 J" f! e! y: @
4 I& j7 t2 S3 K$ e3 g0 E+ U( z
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> 以下是引用片段：
6 Y% z+ E" O2 f0 A; Q& L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. E9 z) y1 ]3 ^. L/ Z+ F
<html xmlns="http://www.w3.org/1999/xhtml";>
1 ^0 a- X% v+ j
<head>
$ G. v' a4 D9 u* ?
<meta http-equiv="Content-Type" c />
/ \$ F8 _9 c# _8 I
<title>css2.0 VS ie</title>
_5 [- S/ M% B5 k
<style type="text/css">
5 `. l, G. c8 G+ g' f- E
<!--
. F5 h- r0 m( v2 m
body {
8 \$ f' N0 Y. M- ]0 _2 U$ L
font-size: 12px;
' [# k: J7 @9 u+ R. [+ Z
text-align: center;
( }& H1 v) D7 v2 U
margin: 0px;
8 H) H! @+ g g6 ]4 b. Y& U; t
padding: 0px;
" {% N4 G( d) N" e
}
7 e4 ]6 @$ H% X' s$ @: f* I
#pic{
- `, ?9 `) X1 G
margin:0 auto;
; r( z9 L: X" V/ I0 c
width:800px;
1 X, E5 ~/ a' @
padding:0;
' M. P, E& I" l$ j2 H: x) ~
border:1px solid #333;
& z6 _3 \( i9 R9 M% i
}
5 c' p+ M4 \; X
#pic img{
% a4 ^, k) y# v7 t) B8 {' {: i0 e
max-width:780px;
2 v* @, v# x4 B$ i
width:expression(document.body.clientWidth > 780? "780px": "auto" );
4 L/ O1 `8 N7 ]) m* A+ Y
border:1px dashed #000;
; E* Y/ X' u0 I" ~* I' u
}
! w& Q4 P* f1 P) z' g+ C
-->
1 S; s \4 Y L X5 y/ r
</style>
0 X. Z2 Q! K) {7 E& W# [
</head>
& O. r3 E$ e E: T+ a) R! i
<body>
6 ^. x2 p8 z2 \* P! N B
<div id="pic">
* }& [* N1 l8 [" n! c( S
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
/ _5 T% q- |5 E) v( A
</div>
% b- Q q- J& X% z/ z; k* S
</body>
3 j, K, g1 T- d5 {" h* c% m8 ]
</html>
. e/ _1 x+ T3 Y1 U
. D# m" _5 \: p( v8 L/ B
百分比适应:
5 ~+ o4 D/ C5 R
以下是引用片段：
4 B$ {7 k& F- |9 w5 K9 b# B5 W
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 [' G! [0 p9 A- c6 T: G5 {
<html xmlns="http://www.w3.org/1999/xhtml";>
" Z6 k1 I/ `- Y+ ~, q! A' Z/ _
<head>
% Q5 G0 l9 ?* n! a/ j/ B
<meta http-equiv="Content-Type" c />
9 t$ p4 k6 |0 o2 r6 A ]
<title>css2.0 VS ie</title>
# |; [3 _) V. R' K) v. U+ ~1 \( E$ b
<style type="text/css">
! o1 }$ R$ }: i! @, K6 ]3 {" \( g" {
<!--
" y: D/ z, ?0 D' v6 w- L% H
body {
1 R8 g. e/ n/ d, s4 U8 L
font-size: 12px;
2 d6 n8 J3 ^' L* I5 g
text-align: center;
4 U- A$ O9 t9 k8 [( M. p
margin: 0px;
7 }8 v% y* `8 V; r9 x. l
padding: 0px;
1 F3 v4 Z' N+ j6 A9 [
}
' J1 s4 T$ s' C9 O4 i! e# J
#pic{
, O, {" m& ]) |7 L: o
margin:0 auto;
# K4 I4 N( o3 f6 E; s2 T: g
width:800px;
4 ?0 q e j+ e" s: ?
padding:0;
; u: ^0 ~8 H5 C
border:1px solid #333;
$ ] I, O: Q# ?5 O, ~6 b
}
7 J; n' {2 O) E7 {7 C
#pic img{
3 P1 {* }. K8 r# h: h
max-width:780px;
$ D- ` Y9 o# V2 F" b0 }
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
5 U* q! j2 Z+ z+ o% \; M; D9 P" O
border:1px dashed #000;
* |/ L* O4 G+ @$ P. U
}
( C1 u4 O* N" B
-->
0 s0 G, T0 S& j ^
</style>
9 ]( n1 I. x( d$ i
</head>
U" V1 G4 H# o) p2 c* R8 `
<body>
8 E3 v2 {; }5 N* b
<div id="pic">
/ I! W0 F. u7 D; |/ p' x
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
8 |6 M6 ?9 T8 E/ S8 X* v. A4 r* j" w$ k; j
</div>
, W4 |2 @7 [( N1 I7 J) ?0 O3 y- T8 m
</body>
' m0 U( Y* Q( ]
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
