标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
( i0 Z4 u0 N% S- }+ u
关键在于：max-width:780px;以及下面那行。
6 B6 U5 z% S. S+ N9 i3 ^' j
固定像素适应:
/ w! ~) _$ I/ q% ?4 z' v- m
- F" Y; I) z8 X p7 o
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 B- o5 B8 l1 u7 y8 m' \# R' P
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 h$ \; v7 R: H( F. f
<html xmlns="http://www.w3.org/1999/xhtml";>
0 m2 x |: U, V: o
<head>
& i9 f& p5 \$ b: z) c
<meta http-equiv="Content-Type" c />
9 m# d; _6 g6 s3 ^
<title>css2.0 VS ie</title>
. ~3 k# r6 D K# d; H4 i. S {
<style type="text/css">
3 b! Y" G8 u4 s: w# ^1 F) R& d
<!--
! C- v# }& f3 W" K; w1 ?
body {
3 |4 ~6 o2 z; Z) H2 D: w
font-size: 12px;
& d4 M" H2 ]/ n
text-align: center;
! `4 |9 o: Z5 \( j& w. c2 ]: N
margin: 0px;
! H, \0 }3 b( N: g/ }5 s
padding: 0px;
1 X- B& K& G' c7 O2 t4 C; ]
}
. W. h2 }( _0 ]; E" [+ {
#pic{
; s& X* p8 B. ]% u* y8 Z
margin:0 auto;
; a0 m( l+ V/ T
width:800px;
7 Q' h- ]5 t) j) D7 S4 t: M
padding:0;
9 L# t! H: L: u# D0 [
border:1px solid #333;
7 [0 _/ Q+ s' L8 p+ G* f
}
, O9 t* N0 F1 a7 K2 b7 p& D) o
#pic img{
: z+ K) }& n4 f8 y
max-width:780px;
! o& A7 c' l r) v4 |
width:expression(document.body.clientWidth > 780? "780px": "auto" );
+ b9 S9 c, M- b
border:1px dashed #000;
; J7 O M. E7 O' W/ v
}
: w% w2 v i$ P0 O* `1 h
-->
r5 M3 A. C8 @( o& S
</style>
% g/ z8 o$ a! _: p; v) N* S1 c! ~
</head>
8 f, H, x* O3 K6 b& t! k
<body>
+ V! n4 J' E" J
<div id="pic">
. `* L8 }% q: H% V$ a- g. V
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
$ }' T& y7 I m8 C
</div>
6 T" Y8 S; v) B+ R& m
</body>
4 l# [: K4 [$ X2 X" ]
</html>
, _- W& R3 p2 x/ ? i' L
& q9 s' k5 m, N. R
百分比适应:
+ d s6 l) ~/ Y B% ~
以下是引用片段：
, m# I( i( U0 ]2 k% D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- V: T. T# ?4 b* |# v/ P, |3 p
<html xmlns="http://www.w3.org/1999/xhtml";>
6 o2 N% w, ~" G& A2 _
<head>
/ f' g8 E1 N* ?1 j: a
<meta http-equiv="Content-Type" c />
6 y# g ?- J& h' g
<title>css2.0 VS ie</title>
- ~! A% w& @, l. I
<style type="text/css">
5 X: d$ W" i& v- _7 N3 z
<!--
. m1 \5 r1 |/ J
body {
2 v" A3 {; G: z
font-size: 12px;
0 v$ J% o' V/ i3 a: P h# T
text-align: center;
* e/ t3 @4 U5 d J# K
margin: 0px;
+ U8 l8 f6 w6 a' ^$ J) q6 Y
padding: 0px;
) r, h2 K( {# O
}
4 i! \# A& ^/ U% I2 [) {
#pic{
/ \1 @$ P* B& `. J( ~( {
margin:0 auto;
! k: i( i1 R; e7 a% _( t2 Z
width:800px;
7 N* S* f5 f' n: T) ^
padding:0;
' w& F$ c3 N5 P M2 x. Y
border:1px solid #333;
* d2 \! F3 R. x7 e5 w! m: T
}
. d, ~- x- P1 h! ~! T
#pic img{
: k( I* C) Y8 c; b. y
max-width:780px;
* W" p& T' k# o% d9 x) j
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, _/ A' R' d" `/ {/ T5 ^
border:1px dashed #000;
% T4 I2 [0 i- R7 t
}
; _: R2 B9 g. z i' R2 \
-->
) Y. |# F% T4 _
</style>
" q- M: ~% e( W1 d5 K
</head>
( x7 B+ T& N% |0 X3 l7 `
<body>
3 l1 |2 P* G" Q+ L: U; o( z4 p
<div id="pic">
1 M+ D7 L0 y5 j P0 W
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
9 I) I+ T6 B: d3 H" e9 [
</div>
: h3 J7 i: @* u. V% E3 B2 o4 k
</body>
J3 q) u; ]3 Q) _% y, ~! @1 e3 q
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
