标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
" T8 E- D7 f5 _/ W7 M/ F
关键在于：max-width:780px;以及下面那行。
5 X% R. i1 q2 ^+ N
固定像素适应:
. I$ u% L( e: |4 g$ l2 c
, x0 c3 |4 O) y. G( J
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> 以下是引用片段：
+ J% c) H, f3 i
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# v0 W4 i! o4 j
<html xmlns="http://www.w3.org/1999/xhtml";>
3 U; `. P+ Y" s0 d7 [
<head>
6 Y6 @9 C! ?! ?: h! S4 v1 D/ y s" z
<meta http-equiv="Content-Type" c />
) ?8 o4 j6 `) A k/ {; q
<title>css2.0 VS ie</title>
* n3 F4 E8 Q1 h& l
<style type="text/css">
' c5 k" ]5 H2 q; A( ^
<!--
( U) C! e* \* L
body {
/ U/ j0 H3 N5 d5 R; Q
font-size: 12px;
1 [* W- a4 @2 i
text-align: center;
8 ]/ K( j% ~) I X5 G0 x
margin: 0px;
9 n( N4 J0 F% x$ ~$ |
padding: 0px;
/ w# l. b( |* v7 W2 L! r6 a
}
! G! {: J9 l g; e
#pic{
' _0 ]6 _2 B8 V- c+ j
margin:0 auto;
& J6 U0 L+ V1 O2 y. L
width:800px;
- m& h0 `/ X4 d$ }4 {, C
padding:0;
5 s8 v. @2 S: M7 k% D: \
border:1px solid #333;
( @: Q6 z! ^3 {2 S% w( u2 f
}
: X" {' p5 P1 ^( ^1 S+ `
#pic img{
( Y5 E# u7 J! c( c9 T- w
max-width:780px;
+ h- E% C5 j# O
width:expression(document.body.clientWidth > 780? "780px": "auto" );
& F8 Y9 b& Z/ H- U9 L* b3 W) j2 t
border:1px dashed #000;
/ o: ~9 ]1 a, C" I
}
$ N1 \ W" ~( n3 @
-->
/ |, M) M! o9 @7 ]- r) ]9 r$ K
</style>
5 I* i+ R' z8 |: g
</head>
$ L& b! W9 k: Q. z
<body>
2 ^& N1 p+ r: L% V( [! g" E
<div id="pic">
- y6 X9 T) G: u' Q, r( h
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
' y5 X, ^% U$ H- M. O7 m% R8 k
</div>
, g) X$ y% O: l. ?
</body>
4 g6 B$ s* C" r. }3 S
</html>
1 a: G: g! J; c+ ?9 h
4 [6 @ q: j$ q- i' n9 N5 }
百分比适应:
+ F! }! [ Q# c$ Y$ q, {9 P6 n
以下是引用片段：
' j% [7 V# \/ R, G# Q1 k8 Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ q1 N- h0 T* ^" [ R/ _
<html xmlns="http://www.w3.org/1999/xhtml";>
2 i: s4 r, l2 o- w! b$ |3 R& q9 h
<head>
2 N- o- N% a5 f# s
<meta http-equiv="Content-Type" c />
! s9 E/ q+ w% M0 H1 f
<title>css2.0 VS ie</title>
, g I/ U9 j) d1 S3 z/ K
<style type="text/css">
' W+ _ P: f' D# V2 B: @" [% k
<!--
, Y* i1 R" X T+ \! P
body {
3 @5 `, c# L: e& F8 z4 d
font-size: 12px;
& L" _4 W6 Y6 L3 W+ F
text-align: center;
9 S8 B: Q' ]( R [4 Y
margin: 0px;
& |# x1 r/ i0 p/ i+ K; \. g p; j
padding: 0px;
) {+ M% M3 k: i0 c {6 c3 T Z
}
F5 h2 ~" n% R/ c& F8 i
#pic{
9 f o' H& J3 J+ w# w8 j) w
margin:0 auto;
1 u: J% _, ?: t% e( g% C
width:800px;
. D! i9 ^/ J5 P! P
padding:0;
9 I2 m: z# x! f8 S" w+ v5 V& H
border:1px solid #333;
: e( Y/ n; U t
}
. I& A5 ]. e$ v+ q P$ g
#pic img{
7 D+ c0 c+ T+ [. R% U0 ]
max-width:780px;
0 {9 e3 J; O+ o; k+ T( C
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. n9 w) M6 T% X+ X1 V
border:1px dashed #000;
e8 c5 r9 ~8 B: f
}
8 @3 `+ I; M1 b
-->
* L. {# s4 \ _4 s5 x/ ~0 M* b
</style>
6 m; [5 _9 |% o6 ]
</head>
0 B' j( |' b p8 M3 K
<body>
8 P% G. k, ?4 W: f7 M. n8 J
<div id="pic">
2 E; Q! F2 L9 J0 i% E+ u
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
" J \# s1 e" I- L9 i
</div>
; K" ?: Z' K# s& T, U" @/ ]7 v
</body>
: b/ ?8 j9 E2 d( q, ]# v
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
