标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
. }2 a8 W" c: k/ k f
关键在于：max-width:780px;以及下面那行。
9 ~9 m" h4 `# Q! ^8 y
固定像素适应:
7 B- i0 F) M$ L0 o
L# | F. G8 ?6 {1 e6 w7 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> 以下是引用片段：
% \' \8 }7 g* @2 y9 P
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" P4 p$ K" u' ^0 b7 z3 R# K
<html xmlns="http://www.w3.org/1999/xhtml";>
! T1 a9 y( Z& `) [
<head>
5 x+ O, f, q; P( J7 t
<meta http-equiv="Content-Type" c />
- Y' G# H' }$ o Y$ @9 c+ X% A) s- N
<title>css2.0 VS ie</title>
, H8 }8 J x5 x7 k! V% Z" `
<style type="text/css">
& ]; g) u9 e; G* \" r) ~ k) B
<!--
% H3 L- A3 E( z
body {
0 m( ]7 R+ y# h3 H* f7 h
font-size: 12px;
' ]+ a+ X8 z0 g/ @7 _- g
text-align: center;
& P3 a3 c. j [4 }5 N' Y( F
margin: 0px;
, L: @ [; f- C5 N
padding: 0px;
% X7 P: W1 L5 y$ k" \* U6 P" q
}
7 l+ X _. m; `7 U' @' b
#pic{
! ^9 Y$ ?0 U, g- M$ z% h+ B
margin:0 auto;
$ x4 A8 N: `. c; G0 }$ s( a
width:800px;
6 H, H& t( t$ i: Y
padding:0;
* T, u% ]+ f& @. ]8 j* V
border:1px solid #333;
0 o& \5 }/ R$ a* K5 V; F
}
2 \0 T6 v P1 E
#pic img{
+ }! K% I3 P2 d& h: l
max-width:780px;
% V$ C# d, C o
width:expression(document.body.clientWidth > 780? "780px": "auto" );
9 w2 C7 p' @/ Q X3 d! s; \) B
border:1px dashed #000;
( C# m* B; _! L! K0 C
}
" l) }2 [2 k& x6 s7 X
-->
; V; [; H l& [/ s$ E: H
</style>
- H. S! a J2 p8 D* I3 |
</head>
. R- x( R/ w* `) q" E3 {6 L
<body>
, y4 l/ \# h( h" U$ m
<div id="pic">
( X+ N5 k2 b ` |# s0 Y
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
r+ U7 a; \) E) S0 o4 t
</div>
- I$ C# ]) x4 F5 }) {5 G; k
</body>
! ]/ d, S) k: T6 Q
</html>
j6 X1 f; u% m" S% b
) {+ J5 R: g: x
百分比适应:
- A$ J( J9 E+ V3 x, U
以下是引用片段：
. k3 K' u0 }: [
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ e. q. g! a6 W3 i8 k7 e
<html xmlns="http://www.w3.org/1999/xhtml";>
. I1 k( y3 S, T+ \. d9 M3 y
<head>
. Z6 _: I6 y3 `3 c& `- Y* j
<meta http-equiv="Content-Type" c />
6 J, G. S# H9 c* |
<title>css2.0 VS ie</title>
8 c' C K: ~# L5 g
<style type="text/css">
9 y" J! U- b" T! d& @! M
<!--
+ X* w8 }9 D, c, Z4 |/ ~/ \
body {
/ ~4 D, _- U0 p8 o8 K
font-size: 12px;
5 Q# d _" q+ I9 R; |" i7 b a- u
text-align: center;
D6 U- {9 @; Q7 `# t/ ^, p# \
margin: 0px;
- b. \- N5 Q4 E1 M
padding: 0px;
, m+ A% G" X" h$ U
}
$ e0 `; A/ ^+ A$ w: Y# ]; k5 {
#pic{
& k5 _* r) x' y1 S
margin:0 auto;
" n, `4 _0 }. u
width:800px;
7 ]8 T! y. X* i! T
padding:0;
1 V5 G& t9 F x& _+ C
border:1px solid #333;
9 d- W T2 F7 z; X% [
}
2 e$ a3 {* ~2 S% I: t
#pic img{
7 Y+ }& l( ~; C9 t' s6 E3 x
max-width:780px;
) C* s; |3 O# j- A; P
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, w2 z* S0 t- O! \
border:1px dashed #000;
2 B- m& u$ D$ [8 x+ @$ v3 Y
}
) S2 j3 X8 T0 a. O8 I3 D
-->
! J3 e5 q: d# p2 N8 T" R; b7 l( T# I/ {" R
</style>
) O& D% N( _# A4 A0 h' ]
</head>
3 m# [* f4 v' g, l4 V' q
<body>
$ I7 a, b% J* V* L. V; O6 E
<div id="pic">
5 I7 F3 C' y* V N( x/ ]! y
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
1 l# M2 C D; C6 a- e- p) y
</div>
# _4 S% d5 m7 | [: D
</body>
* [8 B8 n/ t, l2 x
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
