标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
" L& F0 J# {8 F& o" W
关键在于：max-width:780px;以及下面那行。
0 }2 a" K/ z( N P! P3 d P7 C
固定像素适应:
: s$ J* H4 `6 c5 J5 ]
5 T+ U5 ~0 n" P5 V2 G9 p9 h
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( y' Z9 m2 _. R& Q) g; f
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
K8 l8 g5 h# K" B
<html xmlns="http://www.w3.org/1999/xhtml";>
. y- W, l) R5 Y. c: y
<head>
" H P# ?. u* |# J4 f- i4 n
<meta http-equiv="Content-Type" c />
% G4 X, A: c3 O" L# [( J4 X) d+ x( g
<title>css2.0 VS ie</title>
9 N! y; O: e! N" w A4 t; x
<style type="text/css">
+ L- v# r9 W4 p& t
<!--
- H. f7 ]" _9 s4 M6 i8 ?- ]4 r
body {
6 q- P _2 ?1 W, W5 B( v
font-size: 12px;
: v5 r9 ?- f7 t
text-align: center;
7 y7 x2 ~4 [, G2 q& z
margin: 0px;
2 {# `, t9 V4 @# R9 @/ p7 P% D+ ~. p8 l
padding: 0px;
; i+ |8 y, V0 U8 u
}
# E" o: D$ n2 i* d& P: f
#pic{
. v6 p9 K9 Z$ j$ K+ S1 D5 }# p
margin:0 auto;
7 \9 b0 A6 z( Z, A
width:800px;
2 T+ n6 m; k! {! G
padding:0;
' F0 w2 c1 w8 n7 _! J$ E) }; X7 W, o
border:1px solid #333;
' @0 C% F6 w' z" m
}
, D) s: z/ V$ A. N# R' h, \
#pic img{
" b2 Q, B2 g8 w3 m0 X/ {0 K# @
max-width:780px;
* A2 s. p' I9 X% p2 j8 t
width:expression(document.body.clientWidth > 780? "780px": "auto" );
7 V; Q. D, w. s
border:1px dashed #000;
" [; l) f/ H3 ]+ I9 e
}
9 D, ^! l5 e1 d8 j; E
-->
1 g( I3 i3 r5 J$ a* J' v S
</style>
# B$ k" T. M. N& C* N) a" c; {
</head>
$ E" Q1 O' P; H1 V9 I8 [ I6 P
<body>
" \4 x" M: [4 P, L* S
<div id="pic">
2 V' ^' c2 E9 T8 W
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
0 j) k: I5 `6 u: }8 Y" K: a) p$ L) e
</div>
2 I2 O3 j* E9 w! S4 c
</body>
6 v0 S C0 _/ t8 `
</html>
' b# m( y' j5 L0 [) _$ y
4 ]8 m1 I: b) r' N8 Z' ^* R
百分比适应:
, L1 q- H. C' I# R L7 d: L
以下是引用片段：
# U. {' \4 \% m* r0 u! a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 a( J& X) V1 N* F1 v* O8 @5 v
<html xmlns="http://www.w3.org/1999/xhtml";>
z/ X3 a0 L3 d5 D6 m/ a
<head>
# I3 w5 ~: W& p. ~3 j. g
<meta http-equiv="Content-Type" c />
3 P( I3 x1 t: K. n; P" F/ Z
<title>css2.0 VS ie</title>
! ]! `, X/ m% `# g: |$ t
<style type="text/css">
) x# D& z" i; d
<!--
, { D2 d" }' @6 [ Z' L
body {
u$ b" Y: s8 p% S& a
font-size: 12px;
j& a. g9 r% d
text-align: center;
' ~3 o. D5 L8 I* c2 t0 d2 e% \
margin: 0px;
^: s, j0 W& T8 s) C
padding: 0px;
, a/ v( W) F! `+ J$ M2 S' c2 S% p
}
0 X% p5 E* p' @4 y5 E3 m
#pic{
2 U/ Z' j- d) H6 V
margin:0 auto;
6 l" C. a E$ \0 `- G
width:800px;
/ [1 J9 O T( x7 s/ o/ H% i' B
padding:0;
0 p# [7 p: n- F4 q/ G+ V. H1 W
border:1px solid #333;
' ?0 [3 E" c8 Y J i* {
}
$ c* S3 ]0 j$ o/ Y+ {
#pic img{
& i% a( W4 D4 i: g
max-width:780px;
5 b+ S; b9 J* g6 @" z' Q
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 V; c: a5 @7 Q% u' J( E
border:1px dashed #000;
0 k: G% Q* ? ?( N X, j& y0 P( z+ U+ x1 ]
}
$ f7 J7 W# F5 T V a7 A( d/ C
-->
! }# p1 `0 w9 U' v0 [& D3 x
</style>
) ~7 Q' {3 e% N9 K K
</head>
$ J7 p4 K3 U3 K
<body>
- B2 w) Z. G9 |4 z
<div id="pic">
3 d6 j0 q; K( J
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
/ K8 u& k6 n7 \; h1 J ^
</div>
- k \3 w z8 q3 ~$ J, O& \( T
</body>
( _# l1 Y, j q( ?
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
