标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
7 a1 L3 u8 R$ F
关键在于：max-width:780px;以及下面那行。
7 S% J' ~* \/ @! i
固定像素适应:
* L) R4 X" r; \
# r8 J$ k8 g1 n+ G0 P1 b6 N# c4 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> 以下是引用片段：
% i/ ^6 c2 k/ j9 \+ j$ v
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( U2 X3 m5 A' c9 f; P4 O8 F
<html xmlns="http://www.w3.org/1999/xhtml";>
" n% [3 j8 Z% a' q' B& V
<head>
: A6 ^2 s: M* Q! P- V! {
<meta http-equiv="Content-Type" c />
# o4 o! f3 Y% W0 z0 u
<title>css2.0 VS ie</title>
6 x$ v0 x9 N- i& O
<style type="text/css">
( u" p6 ]- l, B7 i5 e
<!--
9 @& D2 l8 E; Z
body {
8 I' h# C' E! v/ U$ a+ w
font-size: 12px;
3 D2 Z$ }! a6 Q9 c
text-align: center;
6 m5 Y( Y2 H# V* f% x0 P
margin: 0px;
6 E9 E6 q2 z$ }1 M t
padding: 0px;
# H$ p9 ?2 e, l- W$ y
}
! P1 x! @; _) B
#pic{
( G- i$ c& U5 I" @# e3 l; d2 q6 [9 y
margin:0 auto;
3 _$ g q8 k# V+ L- E4 A* }
width:800px;
2 ?- U ^0 X- W g1 h; E w9 z# F6 c
padding:0;
& T- u+ Y; f8 {/ s4 _7 J
border:1px solid #333;
' u1 \4 z b" J! C
}
; ?. W* G4 ?$ {1 q" q" s
#pic img{
1 q* Q' U8 s0 y% H7 V/ E8 L
max-width:780px;
) p, \# m1 U- U
width:expression(document.body.clientWidth > 780? "780px": "auto" );
* u( A5 s# B% n+ U
border:1px dashed #000;
. t8 X+ D0 c& t* i, I- A9 ?
}
$ e$ _6 z2 g; Q
-->
K) R, ?- _* r- f% {9 T
</style>
4 W" ]( E v* ]) A$ Z( l# O6 T" q
</head>
0 @$ s. n- Z3 R( f! r
<body>
5 U- u) ^& T4 J" S4 X2 P
<div id="pic">
. B+ \; A, w6 z# ?" F4 ?. I9 X
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
5 k7 V( n8 _4 S5 Y- P
</div>
7 t' `' l7 R0 @! a6 P1 z0 j( S
</body>
4 R* U3 I- z0 p- r# e/ s9 A
</html>
% L3 J* G! Q* i( Q7 L% l( V) M
2 a5 T) {- C5 m: @4 F' X
百分比适应:
5 x7 F9 @8 r- e, F% ~
以下是引用片段：
+ j/ _* c) _6 a, E7 @ p" \8 F
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& L% U4 u; Q7 L
<html xmlns="http://www.w3.org/1999/xhtml";>
R$ U' \0 Y% [: ]. t9 [
<head>
/ x. I! s4 h* t" G0 Q/ q! R2 }0 W E
<meta http-equiv="Content-Type" c />
/ y3 S$ t, F0 A9 _3 c
<title>css2.0 VS ie</title>
. n8 ] T/ ]* y3 c/ P
<style type="text/css">
8 x6 @/ Q+ P" X1 c$ `
<!--
) C' u' Q+ N) g" i3 [6 ]0 H
body {
/ J6 ^* D5 c( j/ h+ H& }6 v
font-size: 12px;
) M' `, s$ z- X, ?; D3 [
text-align: center;
% _) J, I: s2 v2 F2 `' ?6 P
margin: 0px;
' i6 Z* K% W+ B- b# o; {$ H
padding: 0px;
0 g: R' l+ j$ w( B6 s( D/ S E
}
. a9 t6 n% u; S9 O7 H- V' K( ~6 S
#pic{
: K t' S3 x+ v! h) Y9 }
margin:0 auto;
) J9 Z2 \! ?, b' O$ K! b( u% K
width:800px;
9 v9 S- h A/ U
padding:0;
5 Q+ r7 d" X$ Y, q( e1 t
border:1px solid #333;
. H4 b9 D/ J1 x: R) x0 C7 u5 {
}
" ^; o3 Q. _2 F: h S, C
#pic img{
. p- g6 s1 Z: L- N! B9 x" x
max-width:780px;
; e7 B0 y8 l+ W% x6 C/ [( \, U
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
' ~3 x2 H7 f5 O) c5 P' _
border:1px dashed #000;
6 @% M, S0 c8 S+ M9 B" T V
}
9 e. g Z5 S. O0 p
-->
% ?. o* F. V; f: J
</style>
: l4 u1 j' d: X. J
</head>
% Y9 P3 q7 l) N- |. T$ F
<body>
5 U2 S# ^: o! ^9 H5 B9 @: E1 j
<div id="pic">
! l } t) X( L! g9 Q$ p. f, f
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
9 d* ]/ \$ H/ }' j- ]; h3 ^
</div>
$ e6 E: X: H3 L) k9 |
</body>
4 o! |* W) i* t' ]
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
