标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
* p% {: O7 L" V: k
关键在于：max-width:780px;以及下面那行。
6 T0 |7 J5 b, B$ P
固定像素适应:
6 A0 N0 C: U9 l5 ?
5 n8 N# y1 i8 }9 j; S g- M
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> 以下是引用片段：
* \) i7 X% p3 X- Z |; C9 g. |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 |: ] [ d8 x Z5 t
<html xmlns="http://www.w3.org/1999/xhtml";>
! S2 L, F i: i1 M$ l, W; q4 ^* T
<head>
3 A- Y/ C. s3 b0 q1 e3 ]
<meta http-equiv="Content-Type" c />
7 s4 e2 Y. ~* t
<title>css2.0 VS ie</title>
2 h& }/ ?4 l0 d# n, N) Q& G$ K
<style type="text/css">
1 x9 M0 V" m+ N
<!--
; e, T6 g! g# M: o0 w
body {
& ~1 v3 }0 U+ m* X6 ]- f
font-size: 12px;
# f5 n) A( K! E9 s3 R
text-align: center;
/ X l# k1 v4 w9 w: v
margin: 0px;
% F I. q) M7 w$ A7 F& g, C" ~
padding: 0px;
, z" B7 B4 f+ d4 d. p6 p8 {) U
}
& X& s+ b" T( h: g D
#pic{
$ U: }% T8 d$ |% ^) \
margin:0 auto;
s' g3 w% v. K0 ^7 X7 _" R# u4 z
width:800px;
5 m% q4 ~2 c6 W6 |, Z
padding:0;
7 Q, e( y4 j3 n, j
border:1px solid #333;
, f' ~5 g+ _! y* w }
}
5 a: }1 d! `- p& r6 `
#pic img{
8 g* p1 u) a1 S9 Z# m1 d" Q- m
max-width:780px;
9 n7 O/ `; A! N
width:expression(document.body.clientWidth > 780? "780px": "auto" );
' G% W0 f4 l( W6 p# D' M/ q
border:1px dashed #000;
( c3 G: U) o2 ^
}
& Q: y6 f% Q. ]/ P4 d# f# F6 |" Y
-->
* V& U( g/ q h; r. M' P
</style>
# @' t/ {8 a7 q1 h# h7 a/ e8 ]
</head>
0 k6 t e0 b- D
<body>
$ m4 r( B4 R! Y5 x# W9 W
<div id="pic">
- b6 S2 i/ W& r3 q4 I3 ~0 \* z
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 Y( b: D8 Z+ U
</div>
+ b( H2 P# U9 F" ?7 e
</body>
& ^4 y9 z8 ~5 \5 j0 O
</html>
1 u3 }/ m7 L. L
0 p* c, R8 {( R% V! b) n. M0 z0 T: r
百分比适应:
0 z7 G- e1 O% u7 ]% T' w
以下是引用片段：
! F! H+ g& U7 C4 n+ T2 `2 d
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 c) s( c' M) {+ X' ~9 d
<html xmlns="http://www.w3.org/1999/xhtml";>
6 L' q3 r+ L' `( X: d+ j
<head>
3 k: u+ o9 B T8 x! W
<meta http-equiv="Content-Type" c />
$ ]1 o Q3 |; n* @: i
<title>css2.0 VS ie</title>
* i( T& m3 H- F( p" L) M
<style type="text/css">
6 \5 q- |* h' ]! j
<!--
! w/ H5 e% o2 n. [
body {
' i2 y, x4 C7 K' U
font-size: 12px;
* |. I7 {2 j# Y+ M" u- r. P
text-align: center;
3 T& t$ j. R# g* d
margin: 0px;
$ [3 C$ j, t8 w4 C! @8 u( h- X
padding: 0px;
7 s' T% u3 [# A5 [1 N
}
1 z( u% f7 u( x- _
#pic{
3 q7 \% ]* ]5 s$ s- z4 d
margin:0 auto;
+ r" C+ a4 p% R- I& A" {* }
width:800px;
, x# o( ^$ d) ^: K! I# U# a
padding:0;
. a* Y7 ^2 C7 U) z* V( \6 O
border:1px solid #333;
, O0 K* @* S$ U/ F
}
0 I5 D- P; M) X4 c% ~8 p. s
#pic img{
( g' t9 Q1 z% |% j
max-width:780px;
- o+ C! h. i( z$ A7 ~9 W- N
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. ~# O2 ?4 F# ^( N6 c2 c) l, m
border:1px dashed #000;
" G8 ]9 d( R3 x! u
}
6 W& h# D* h7 N1 W s4 V4 d# ?
-->
3 ?) }5 U- |" b8 _
</style>
m* c6 V3 O( d! `, Q
</head>
: e, g- A. f: ]: |
<body>
% z+ c/ D2 D, _: z
<div id="pic">
# `6 e) `8 L% @) Q1 [) C' T
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 X3 C. ~- ^9 N; o& Q, t1 n
</div>
5 v* {# R; h8 O& L1 A; \- y/ H
</body>
1 x& w# U3 E; L# Z' r
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
