标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' l8 s* t# f; u" t# s
关键在于：max-width:780px;以及下面那行。
/ x( }$ e4 U, c& j: V
固定像素适应:
" j9 x) d5 y7 w2 v t, M; i8 n
5 H l( a7 b( A+ b- C% {( `1 a
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 Y3 F7 j- M1 w) ?# i: s( Y+ [* O
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, @ p- u3 v# Q n! `0 D$ Z
<html xmlns="http://www.w3.org/1999/xhtml";>
/ S0 Y/ U& G( q8 f3 r
<head>
! y7 d) j! l3 V
<meta http-equiv="Content-Type" c />
( q$ Z% g* s4 T/ _$ j5 M' f# ~
<title>css2.0 VS ie</title>
/ s2 \# x* R& e
<style type="text/css">
% t. ~7 U/ l* ^/ r7 o5 m
<!--
5 I# k5 e) A# n
body {
9 g; s2 s( ]7 m' t
font-size: 12px;
" ^9 t9 V+ e `
text-align: center;
" S% P' w/ s; a& {- B* ?# G
margin: 0px;
& X& z+ V3 x' S( C
padding: 0px;
4 L0 _4 `. i0 R' V- H$ c$ G4 T
}
3 [$ [; P: {8 E3 T; G' a1 C
#pic{
* j/ s! e: P7 r. r9 L: V: O: D
margin:0 auto;
* a; ?( C; ]- j- E' c
width:800px;
+ h5 Q, |& Z0 H a1 l1 X
padding:0;
~$ W3 G- y# m8 |
border:1px solid #333;
3 O" L/ `3 n" C* a, }
}
! J9 [1 e, R4 e. t; Q* x
#pic img{
1 B+ K! W v) l
max-width:780px;
$ |4 R% O. ]* w: o. G
width:expression(document.body.clientWidth > 780? "780px": "auto" );
( i7 J! V: e# c# W, r
border:1px dashed #000;
5 \# H, z/ S6 n# S9 Y
}
- z, J M5 N. T4 U. s
-->
# o6 s0 a; S2 `
</style>
$ |, L9 X, y! U+ y0 ^0 L
</head>
# A+ y# Q; M' T! n1 E
<body>
5 W- E! h: N# F
<div id="pic">
2 J- g- N: z5 T' B; P/ K
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 Q; w$ m, z( m6 k( e
</div>
! c0 E2 E9 v' e8 ~8 K& n! i# `
</body>
% q+ k" ?8 V% J( n$ m
</html>
* s. |* a3 E& p3 a4 R% D
1 k$ U7 r4 w0 U. m) y u. n
百分比适应:
0 D6 M d; g# q$ V4 I* U) N; {! o
以下是引用片段：
3 w- ]8 y; I. P% a2 j2 Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; E9 o# z' k1 o' e0 s2 G
<html xmlns="http://www.w3.org/1999/xhtml";>
2 B. S5 z @3 k4 B/ s% P# N7 R2 [; r
<head>
1 \* l) t! P1 }% S; f$ ^9 O+ M
<meta http-equiv="Content-Type" c />
0 t: P1 W4 e5 o6 g( U, b' i6 {
<title>css2.0 VS ie</title>
6 t% e" p& C$ r4 @" f
<style type="text/css">
+ J9 t+ V: z d) o% {
<!--
7 w8 J+ X# t8 L
body {
- q3 v+ n. T9 F( @
font-size: 12px;
4 ?# ?, i$ C) T4 L3 U
text-align: center;
. E% C4 Z" t: m% e% J
margin: 0px;
( ?7 z) u2 ^4 H- j$ n
padding: 0px;
# O2 n! S* z) A1 k; z/ n) S
}
* L; } B$ ?, [0 o
#pic{
, t3 k! g6 D; G4 ~" P
margin:0 auto;
' v) \" k" q0 }# [
width:800px;
# r3 c9 f+ d. e: d2 P5 o- L% D7 b
padding:0;
7 k. s/ `/ m. T6 N- y; o( M
border:1px solid #333;
) R. b9 I, Q) K" b! Z$ X" `
}
6 }! x! y- @/ N" K+ `! e" Q% C
#pic img{
. X2 K; w4 }* X9 r
max-width:780px;
% _- J4 d- G |7 k/ G$ {. |
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
+ A, Z# U( S& J
border:1px dashed #000;
7 H E9 V) Z) a- C/ k
}
8 A6 o/ {8 f) H3 d) f
-->
: I0 X/ E, q/ b' b' p* C/ C4 i
</style>
% _8 Z# Z3 [* z! R6 H/ m
</head>
. I% k* v" l) r% {- _" Q+ i
<body>
; Q+ u9 Q8 C) O' e' w
<div id="pic">
/ \, u7 U1 z$ v' k: E; K; x* f
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
$ |4 Y* m" D' P5 t- ^0 V+ D: S
</div>
0 `# y! j# w( o ^- L0 [' _4 T) M
</body>
: g" N+ \% V# h! ^/ p
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
