标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
0 @" s) c( \) W/ u$ y% ^2 _
关键在于：max-width:780px;以及下面那行。
: E4 K2 O2 T. k; `: T" {8 f+ u
固定像素适应:
' w( M) Y F5 `8 [9 a/ h
9 D" n. }7 e& c( C
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> 以下是引用片段：
. B+ K i/ }3 ~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 x# a6 p; r3 G+ M
<html xmlns="http://www.w3.org/1999/xhtml";>
K# T" M: {" |- [9 M* e# m$ U2 c3 ?: \
<head>
& p9 v) t8 y' f' `) B
<meta http-equiv="Content-Type" c />
( |% v; P* T; z4 t& \
<title>css2.0 VS ie</title>
/ O7 t$ \ e8 q3 Q) Y( G- w
<style type="text/css">
. r) p# l5 x' N; s- T6 ^9 ]2 T
<!--
n, q. [0 Y; l7 @+ u; u" _ G( T
body {
1 ?: k' |# \5 x& V( |
font-size: 12px;
% ^4 c5 B' m+ I
text-align: center;
$ j# G$ J2 z) P1 o0 ^ a/ r) A& a, Y/ ?
margin: 0px;
+ k T7 _5 I5 h$ c
padding: 0px;
, p& L4 t0 R9 Z( }- Q2 Y; t
}
+ Y. v) l% }- N
#pic{
0 r7 l Q w1 H0 h( L
margin:0 auto;
9 ^% ^, X/ l/ X9 f
width:800px;
: c8 d* R& e* L4 b. [/ l8 R+ L& b
padding:0;
" K8 I' R, K4 g! e
border:1px solid #333;
0 \8 M5 ]1 V' i% E- u: a7 ?5 u
}
+ W! \4 r) u& O( ~2 m, \8 v5 V
#pic img{
. v' a9 ?" }9 M; i
max-width:780px;
3 V h8 P' M" ^4 A
width:expression(document.body.clientWidth > 780? "780px": "auto" );
, X# f( p* P/ X8 V, \: z
border:1px dashed #000;
2 A) E9 e1 _* r0 c+ P6 Y S3 n
}
4 ^- N: i0 _; U9 W" p& b$ t
-->
' ^. l; O4 i& _. b5 o
</style>
- v! E7 ?; b# J0 V' ]
</head>
6 y) h1 q* F5 n% `* w
<body>
. U/ j6 [. z9 _6 C
<div id="pic">
& p& I, n6 y4 z# X
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
6 _1 j: {" b% p
</div>
& }& |1 I8 k# M" b1 Y0 E& W
</body>
) y2 |6 _! Q) Y$ E6 w/ l$ o1 e
</html>
7 ]( K+ y% l+ R
) r2 E/ b) u5 |. ~3 j9 a" g; N; ^
百分比适应:
4 S: y" p0 c' s$ u
以下是引用片段：
; X3 |+ H3 D: e1 L5 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% K/ y& h3 ]7 c- y' i5 R. Q
<html xmlns="http://www.w3.org/1999/xhtml";>
( x- u% ^$ z4 M) M: ~4 g
<head>
$ i. _+ U. G2 Q+ |# r/ |* d7 Z5 l
<meta http-equiv="Content-Type" c />
' ^( H. N5 y6 e5 [
<title>css2.0 VS ie</title>
% M% i: C! j$ U4 R% ~/ t
<style type="text/css">
3 X# ]$ `& K# Q! ~$ ]4 H
<!--
* \4 _) a! g8 u% \
body {
3 Y' `/ m& u3 Q6 _( v1 L
font-size: 12px;
- Y' @9 x2 B4 v
text-align: center;
y1 L7 P. H' c" s$ F
margin: 0px;
% b6 D) d0 |" Y4 N' V# ~
padding: 0px;
8 H) K. o6 \& g3 m% i
}
2 E# ~8 e" |* R/ ]2 m
#pic{
- l3 r' p1 Y, k/ h! i9 W
margin:0 auto;
3 p- H& l5 B- G3 w* C
width:800px;
, M+ h. Y: d' T& C" h- L
padding:0;
& w! p3 {- a `. S5 d( p C
border:1px solid #333;
, ^9 M; N2 @6 T) i$ Z3 B5 A
}
1 y8 X/ {( R9 \) e* Z V$ F
#pic img{
* V! k. T& G% k
max-width:780px;
& ^7 C: o+ V+ O; B3 f
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
7 r4 z$ L, Q% _& R# {
border:1px dashed #000;
M q9 S2 j" `* x9 O
}
+ W! L% P/ x# u+ }/ n1 {3 H
-->
+ ?/ L' k: t. v/ r+ {
</style>
9 q- @, o8 X, ~( F8 E
</head>
2 q. {+ Z: U) @. K: R* B" |8 _
<body>
5 a3 x6 f; @' H9 r0 U% M6 r
<div id="pic">
3 F1 k' ]' G; n) P- @) I/ `
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
: `" g- |0 Y' e% V' F6 M
</div>
1 f, Z0 s1 e) s( |
</body>
2 R, B0 J( n$ J4 B
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
