标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
7 e" k# w5 z4 d1 e9 Y& k3 }
关键在于：max-width:780px;以及下面那行。
; _- Q7 Q' K" X3 v
固定像素适应:
, |" {6 \/ X3 ?- e" {# K
7 Z5 @! f& b& k1 z1 A/ |9 F. L5 n: x
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> 以下是引用片段：
1 Y [ q6 X, o. p% v
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' c. y% {7 X( b
<html xmlns="http://www.w3.org/1999/xhtml";>
8 M# I9 f; t. t
<head>
" o6 s; C U4 s; l7 R. k
<meta http-equiv="Content-Type" c />
2 h' K8 ?; q5 ^. t% x
<title>css2.0 VS ie</title>
/ X" m/ B9 Y( e$ k( a! ~; y
<style type="text/css">
& B( g; I# g0 K: L7 N
<!--
+ E3 R5 n6 g$ v$ I+ Q
body {
: h+ M: I4 {* @. g% w$ N6 p
font-size: 12px;
. T! F) P: U9 Z
text-align: center;
9 S" a$ X5 Z6 ~
margin: 0px;
# P Z/ Q) M4 }" g6 w b3 ~/ _
padding: 0px;
9 V& |& C0 Z# p! q: F6 A
}
/ w& V. @9 _3 I; d' d% p1 J0 Q6 u
#pic{
# [7 J1 P* N9 o6 Q: Z# T) V
margin:0 auto;
9 s3 b( p2 L! z: A
width:800px;
. U1 t: I/ C8 ^6 y6 j% t; v+ P9 e
padding:0;
9 u: _5 E1 m# @3 M6 Y) G9 L4 |
border:1px solid #333;
+ U- ^4 f- }! J' ?. x8 n. h) f
}
4 X( r& l8 `$ i$ x9 D. P
#pic img{
7 o" g- M# S X+ E1 j
max-width:780px;
7 @5 `! @0 E8 ^! G
width:expression(document.body.clientWidth > 780? "780px": "auto" );
" F3 l/ @( b4 A( r
border:1px dashed #000;
+ S* x& w% |) t) f( [
}
; t9 R$ C) E9 w( J0 f' ~
-->
) h/ _) ?8 H1 U& N" g
</style>
4 l O3 H$ R0 N: O
</head>
! M9 Y8 F2 X4 z% W6 W6 l k+ ]6 n
<body>
" m( n/ |) T$ ?/ l
<div id="pic">
4 F' I+ o G* n* c4 Z% i/ K
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
) z: h7 d2 p; e+ f9 A2 v
</div>
6 K9 |8 W! S0 R/ L Y5 \
</body>
" Z' I! t+ s# [/ r* h |% |
</html>
! U$ x/ H3 |1 v0 u' o2 P, {
) x$ N7 f/ ^# ]% f
百分比适应:
7 E( f, m- \3 y% e1 _
以下是引用片段：
. N0 E$ j$ z3 f( `% j3 }' m& B( a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ x& `0 L& C. T7 i7 p
<html xmlns="http://www.w3.org/1999/xhtml";>
* f% P5 i" Y2 @) [0 `4 i
<head>
* X- {& A1 Q4 d, p$ x4 L& F
<meta http-equiv="Content-Type" c />
& B3 B7 X# {+ p) [8 U3 \
<title>css2.0 VS ie</title>
, p7 f$ J; z9 _) j& g
<style type="text/css">
+ k; c! K# i6 _' ?
<!--
- V; N# {! j( Y% g J
body {
# `# I6 |. o4 s* e* n; r8 y) p
font-size: 12px;
3 y! J, Q; t0 Y, I7 J
text-align: center;
* j6 f* Y6 G& T
margin: 0px;
, b" T+ B2 ^/ N n9 @3 d' Q: Z; s
padding: 0px;
7 U5 u5 I( c. @6 A6 v t) N
}
0 [7 v# b3 w7 I
#pic{
2 I/ ~8 A8 j% Z2 }, W& `
margin:0 auto;
l" \5 X2 c2 i1 ~7 ~" }
width:800px;
! K# U5 y+ U A, |9 r5 k
padding:0;
$ I5 q3 T# C5 |" M0 D6 H6 `0 b
border:1px solid #333;
' a' A( b/ Q& @) m9 O) d& i& @
}
/ r& ^ Z% @& f3 x% M( b0 f) @- Z2 l+ J
#pic img{
, N3 m' h- v* j+ A. c$ |5 [
max-width:780px;
* c1 O( L, ?" o A. o
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
7 s& e, X0 Q& f2 K7 Y) T
border:1px dashed #000;
. ?! E& j7 e+ W+ o% b; |6 G" t
}
6 \8 Y3 F8 u \7 O& [- r
-->
& o! @9 Z. M* }, {7 f" Y
</style>
: R0 C& h0 o6 d0 u
</head>
, G. s" b; G* }( C. c
<body>
5 \' W, b, I! A! ?
<div id="pic">
- {: V% w; q( k6 o I$ q
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 C) Z7 e2 ^/ h: y9 C9 y
</div>
% p8 n, D# S/ W. L3 f% ?0 s: R: Y
</body>
% O5 R' Q! Q( x2 F2 ?: N ?# n7 f; m
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
