标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
# u) }; [5 f$ A: H3 T
关键在于：max-width:780px;以及下面那行。
, I" Y) u7 i( ~- g& D0 [
固定像素适应:
' A/ U$ u' T, K& ^
# a: q0 Q. ]! w5 b
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> 以下是引用片段：
" X7 `4 l0 r: U
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
m" S" T$ o9 y2 C
<html xmlns="http://www.w3.org/1999/xhtml";>
* w" z" X0 S# ?0 }
<head>
$ ]& X [3 d7 q; }
<meta http-equiv="Content-Type" c />
6 J9 k" @; \4 {# K0 S8 L" L5 U. U
<title>css2.0 VS ie</title>
2 b8 w9 J: n4 D" O% T
<style type="text/css">
Y8 A" x9 J7 ~5 B: k0 e6 {7 w
<!--
7 o$ N% Z4 U9 v6 d' b$ N* B
body {
. j4 {0 T! \, S7 g% e b& q
font-size: 12px;
7 ]. C" b2 c: T; p
text-align: center;
- {9 A7 L8 D( K
margin: 0px;
, O! f' o, @3 P" J: j, l; \
padding: 0px;
6 e6 K& V. g. Y' Y- d
}
! e0 e+ S+ y; f; Q5 A2 a0 l1 |
#pic{
! \5 p: ^- |9 c; n/ B
margin:0 auto;
& \2 ] o9 L6 d" _1 t" Z
width:800px;
* U& H9 k9 L8 G: C: v$ [5 L
padding:0;
7 k' N; \, d+ C, r* T! A* N4 G: \
border:1px solid #333;
" l( I g9 Y* n! a( i: P
}
) C; H T: b7 Q9 e, k7 E5 L p3 L
#pic img{
( o9 `3 J+ X: A" V, l: e$ e
max-width:780px;
8 u( L# Z6 h# D8 p+ O
width:expression(document.body.clientWidth > 780? "780px": "auto" );
' {" ?: r, F7 E4 D6 ~5 W
border:1px dashed #000;
( M# C/ v, X2 a5 y" r
}
, w) ?; \; C# ], x
-->
( R5 c$ }% i' v( B2 a1 ~: R# y# z
</style>
+ P/ k6 m6 R0 P+ i3 p
</head>
& ~. `0 V& ?7 u! J0 b6 Z0 H& T" o
<body>
: U" Y5 F% _, B3 D) N
<div id="pic">
H4 ~ k2 T9 |3 E& w
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
0 C4 B: I7 M3 J6 ^9 ?, z4 g
</div>
% ], ^' B' J; N- ]/ }+ t
</body>
4 u$ V, O! s* z5 p) ~- O
</html>
# Z/ [ u6 s" U4 H7 \7 m9 N
; P9 k. X+ G2 Z; Y9 ^) n
百分比适应:
1 c4 p& N/ o' ]8 g! H
以下是引用片段：
8 L3 P/ m/ U- N4 W
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, h# r t) g4 b3 K2 D
<html xmlns="http://www.w3.org/1999/xhtml";>
# W& G0 H. U8 D
<head>
/ P8 R; \# z" {
<meta http-equiv="Content-Type" c />
7 I/ q% Y4 [5 Q0 ]7 r4 V
<title>css2.0 VS ie</title>
3 P. Q4 V ^1 a0 I
<style type="text/css">
: N3 q& T }1 x" B$ V& R2 i |
<!--
t+ k% M: D5 B$ r& S1 D/ |; m
body {
4 ~! q9 S$ F0 p" S/ V8 J
font-size: 12px;
7 p1 r2 M! [# ~% `
text-align: center;
/ b" d8 J# e; s$ c8 a2 {* U* G
margin: 0px;
% k. d# F6 L+ P! S% S
padding: 0px;
* x0 y% g! S; f& }; _. t
}
" I. @9 ~5 S1 ^* W
#pic{
- z+ A9 I w% F) S9 o
margin:0 auto;
. w; H5 n }$ `# ]! y
width:800px;
9 B6 d Y$ v3 k! N
padding:0;
0 e! h2 F; E2 a0 a9 J
border:1px solid #333;
% k) ] E1 I4 D2 o/ r
}
& G# _' Q3 k/ D' S+ L6 S
#pic img{
) P2 \; q6 t3 N: x5 ~3 z
max-width:780px;
: Z( W( A& ?- M
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
! |4 c0 [$ L" R! P4 S
border:1px dashed #000;
* n* W8 e! k ]; T8 \
}
6 ^, X5 b* k$ I
-->
- J- x8 r& ~ W5 R1 ?4 {, n
</style>
6 j0 y: [3 X: _# r. T/ {- h4 R
</head>
* N( @0 G# E* @4 [
<body>
$ p- J& P# H8 t
<div id="pic">
& m0 h! ^( V2 r- j- P$ _% k; y
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
& \* ?; c8 R6 ?; a# X z5 ?, u
</div>
7 G$ e, J2 p) n% w1 f/ v$ v# Z
</body>
) y7 ]: D8 D" l- c" d0 w- [- U' |
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
