标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
" P7 s$ ~4 s; N3 g
关键在于：max-width:780px;以及下面那行。
, G. E: w* P8 V! S; d, W
固定像素适应:
8 I9 L" \1 \7 o7 P5 d5 r
% M1 n! r! q( O
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> 以下是引用片段：
4 K6 [" g( ]" C2 {5 k; t' |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# ~! R1 v% d. r3 _/ f6 d0 P! s- j5 @
<html xmlns="http://www.w3.org/1999/xhtml";>
( b+ B. J3 w: k0 q$ K$ C/ m: U0 g
<head>
3 }9 S( `5 G0 Y* w
<meta http-equiv="Content-Type" c />
: c" }% i7 c; |. [: }- e i' N! _
<title>css2.0 VS ie</title>
8 M- `( v) z V9 d
<style type="text/css">
. W: L4 `& D0 G8 f1 K8 |# `
<!--
2 A! C+ J0 D6 \' C4 i3 a
body {
, g8 q0 i8 `2 |- W
font-size: 12px;
* N+ g( o. K: S6 ]8 [% [1 Y# O& @
text-align: center;
) a- h# m: s. w0 j9 N7 o8 X
margin: 0px;
1 \/ }7 D; g9 v( S6 f+ |, ~
padding: 0px;
6 ?; [! W5 D+ R/ D# G5 k8 ?
}
- i6 t4 O$ `1 n) Q* x7 _3 X) P, q- ]
#pic{
. K7 R) z: N9 |& l3 @4 ]8 v; U
margin:0 auto;
) t) W# k2 C! v/ S" t
width:800px;
6 A1 J. k' e1 }) D3 e
padding:0;
+ O7 j- w! _, x+ D/ D4 F
border:1px solid #333;
9 V3 R& o$ I( D3 ^
}
* f1 v5 }) ~% p, J
#pic img{
, n+ c3 u$ O# Z! j# \+ s
max-width:780px;
/ }+ k! T$ \ W( R% X5 K
width:expression(document.body.clientWidth > 780? "780px": "auto" );
3 H3 E# W$ V) f* K7 b, N1 T+ j$ j
border:1px dashed #000;
- e6 n4 i8 G) Y" C9 O/ P% d
}
& y+ ` M* s, Q* r1 K
-->
$ h0 v! e$ c! O {, s. M5 f$ \$ z# p
</style>
$ |3 M# ^$ I" q. n9 b0 A2 m
</head>
$ F4 G' J* T: w7 m
<body>
8 d+ ]" J& k+ F
<div id="pic">
) R) c) A4 n' q/ {& n5 {
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
" `3 I- t% c+ v* g& F& \7 }" y4 r
</div>
: X* Z4 r# R- p q* _, a( U
</body>
0 J" s2 Q6 g4 A$ T# R
</html>
% M4 }& r# ^; A
1 p8 q {3 ?; I- |$ D7 G: W
百分比适应:
- k: K, d( p; O
以下是引用片段：
3 V7 a- o& Z8 i& M1 P
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& H* S1 ^! B/ b5 a- x! Y: f
<html xmlns="http://www.w3.org/1999/xhtml";>
' P7 ? z; T+ ~$ ?; A k
<head>
# m( e# X4 F6 V* J; a+ E
<meta http-equiv="Content-Type" c />
! W) L. R) g: a
<title>css2.0 VS ie</title>
: C2 [1 C# ~: F0 F
<style type="text/css">
7 s( i' Y3 x, I. I
<!--
" Q5 t/ ? g3 I+ t
body {
, W8 S; }! @( b' [4 v
font-size: 12px;
6 N4 {; R- {/ d* L! l6 T) x/ e6 X/ W
text-align: center;
- O6 w+ W7 U9 V; [' |$ {
margin: 0px;
5 t9 X4 Y! A4 D9 M0 @& ~/ a- O
padding: 0px;
& U6 U9 e. S+ |/ b
}
# l% g: D$ X# h' _
#pic{
/ N' c1 G5 c! U, S P6 E
margin:0 auto;
% y% @5 L, C0 e8 p3 w
width:800px;
* W9 p" H8 L) ^* Y9 H- m, v
padding:0;
5 w8 @4 ?% ]7 V* j4 u3 h' L
border:1px solid #333;
: ?3 k! J2 s4 [! X: u' W! C
}
" y; A- y7 N" m) f+ p1 ~3 p: J
#pic img{
; P; b* s( N! S& |& z0 b
max-width:780px;
5 w: u k' @8 B- g, @ N) z
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
% ?6 {" o5 a, o0 ?5 t6 u" l+ I
border:1px dashed #000;
$ i- Y4 _ i6 a
}
/ B/ V+ Y" N4 E8 @' A+ J
-->
6 }! [/ ~5 D5 @% q) z
</style>
) E5 B' |% s/ F+ b } P
</head>
+ U& X7 A" Z. @+ b2 g( z% p) C
<body>
! _1 W3 w1 Y, d( Q8 }* J" ?% w
<div id="pic">
0 Q! f K7 C0 a% {
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
0 ]1 v2 X. U$ e: D6 G. y
</div>
) E1 ]- C2 V" f
</body>
% L' l$ Y4 C" a5 M, l6 N
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
