标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! B/ W0 g+ @ a0 W" S
关键在于：max-width:780px;以及下面那行。
0 A* t- K* Z8 D9 I5 x6 e
固定像素适应:
. J5 A" n4 p2 Y I* R
$ f& i3 j1 n" n) _+ T& f
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> 以下是引用片段：
3 q! k) L6 U7 S1 R. h
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 y* i' x* o% M7 b1 {, B: [1 _
<html xmlns="http://www.w3.org/1999/xhtml";>
, \$ a5 n* k; H8 ?0 d! G
<head>
) \1 P+ ?: c. i, r
<meta http-equiv="Content-Type" c />
9 v4 d" ], `& L- _. W0 t
<title>css2.0 VS ie</title>
& N! e1 m: a' R7 D% w/ C
<style type="text/css">
! y7 z3 f$ t& n3 `8 J$ a
<!--
) }+ \5 u, [* a9 e) }$ C' d* y
body {
7 H9 s( d j+ D
font-size: 12px;
& r- k7 r/ s- E. j
text-align: center;
' S( B* a: |# K' F1 U. t
margin: 0px;
/ F' o; ]* Q" } C2 s% H
padding: 0px;
0 S" z0 j$ ]8 f9 o& Q- M3 T
}
/ y8 }0 M# [' U
#pic{
! j& Z/ ^8 M" B1 ~/ O/ z
margin:0 auto;
" m# Z! ?$ \/ i% J
width:800px;
5 @- a- n1 C3 m9 U2 e1 B0 m" ?0 L
padding:0;
! a8 c& g1 m( k5 Z
border:1px solid #333;
, |( u$ n' G) M- Z7 T
}
3 u v6 i: W& e$ K. v* x- a) ~
#pic img{
5 j3 {# _1 m3 ~8 B1 m
max-width:780px;
" y5 `3 I1 X* c# j! s
width:expression(document.body.clientWidth > 780? "780px": "auto" );
9 S1 H- b( L. e4 t0 U9 y" f4 i& _
border:1px dashed #000;
: b1 s2 D5 z9 g7 g: I
}
+ p5 K" a7 J( k, U5 }
-->
; h0 _* E0 {7 {) G
</style>
' m& j7 D; M0 L$ n& c/ m g! G& b
</head>
: I) a9 F7 n/ f: {4 u
<body>
8 r: }4 c# T8 p& a! |# T. E
<div id="pic">
2 s+ D9 e0 g5 `( y( ?- D
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
2 u0 n7 v( H# f6 E
</div>
8 P5 R/ z. ]) d5 y; G. r3 [' W# N
</body>
c, Z' J6 a9 ^9 }5 U+ M
</html>
! u2 H* g4 i) q p( t
6 X: J8 D0 S2 ^# O& o
百分比适应:
; }+ K1 c& J; j" q0 y
以下是引用片段：
: n* ^1 C2 _3 V6 H! s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 e H, @' [9 b9 F6 d
<html xmlns="http://www.w3.org/1999/xhtml";>
0 n- f) F5 C) Y
<head>
0 A' ?7 w# [2 F |& [" V, Y5 _+ V
<meta http-equiv="Content-Type" c />
/ s1 ~" Z+ b9 U1 @ m, E
<title>css2.0 VS ie</title>
7 X) k* C6 Z6 \" ?3 U3 {
<style type="text/css">
& x7 f9 @$ Y5 N! W5 M k# G1 m
<!--
2 b# A- G) u, q: J9 v
body {
6 ^. {6 [( a" ~1 g2 d) S5 N( B
font-size: 12px;
( D- O) [! I/ e( ?& Z
text-align: center;
) n5 w& l: m% ~- R _, n+ ?
margin: 0px;
# G& q# b& n0 x8 p# [
padding: 0px;
4 A7 [: G$ G' E* g
}
v% U: b$ E$ O/ N
#pic{
8 e1 g; r/ u4 f1 ~& v# p
margin:0 auto;
% T/ l d0 S1 s& v
width:800px;
% | i( n @7 }0 C1 f7 ~, ^+ q
padding:0;
& s/ c3 c2 y% ~3 m6 ?8 b
border:1px solid #333;
* l* O+ ?9 ]3 R! x7 P0 \
}
2 V: `) ^% L7 k/ H
#pic img{
! l: r2 q) \- Z) x3 M1 C9 |7 i2 @
max-width:780px;
% l: Y- g7 h0 V2 j$ C+ v# `
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
5 _" P7 B3 u9 W/ t; R, @) i/ p
border:1px dashed #000;
" W# B4 d1 \$ m
}
1 M4 Q, r9 ^* i2 q- v
-->
/ M! I1 X2 i: i9 ~3 C) M
</style>
- J0 m" \ X' }9 [. T5 l% `
</head>
+ ]. H' `0 @6 d B- O+ @9 B3 ~
<body>
* i! v/ O; r1 K* P
<div id="pic">
6 ]4 J0 _7 l: X+ s" [) v3 s4 k% A
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
; b! ?# W& ~: M7 {+ ?/ N1 e; ~4 A+ ~
</div>
* j1 G, e+ T: ^: ^* }$ t. Y
</body>
% ]0 O& l! s3 E# v/ K/ o1 u
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
